Упорядоченные изображения листинга в div

Я пытаюсь перечислить некоторые изображения в div, но изображения перечислены только в одной строке, но я хочу перечислить их во многих строках (я хочу видеть изображение следующей строки после 3 изображений), мой код указан здесь

<?php
  foreach ($list as $row)
  {?>
    <div>
      <a href = "<?php echo base_url("./resources/images/"); echo $row['image'];?>">
        <img src = "<?php echo base_url("./resources/images/"); echo $row['image'];?>" alt = "" />
      </a>
    </div>
  <?php 
  }
?>

пожалуйста, помогите Упорядоченные изображения листинга в div это мое объявление, и я хочу, чтобы это объявление было таким

Пожалуйста, используйте isotope - isotope.metafizzy.co

— 03.08.2018 05:43

jquery css

03.08.2018 05:24

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете добиться этого, используя свойство float: left, и после каждого третьего дочернего элемента вы можете просто применить clear: left;. Это позволит разместить только три div в одном ряду в соответствии с вашими требованиями. Кроме того, если я могу добавить, проверьте свойство flex-basis, которое также может решить вашу проблему.

Вот рабочее решение:

.child {
    background: grey ;
    height: 150px;
    float: left;
    margin:15px 0 0 15px;
    width:150px;
    
}
.child:nth-child(3n+1) {
    clear: left;   
}

<div class = "wrapper">
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
</div>

03.08.2018 08:01

Другие вопросы по теме

Перемещать элементы в div по горизонтали при вертикальной прокрутке

Показывать полосу прокрутки в Bootstrap 4, когда содержимое выходит за пределы окна

Сделать окно поиска адаптивным

Как мне отрегулировать расстояние между строками, когда есть разрыв строки?

Почему при выделении жирным шрифтом символа напряжения ⚡︎ вместо этого отображается декоративная стрелка ➫ (в Интернете, с системными шрифтами)?

Можно ли подсчитать видимых детей, если родитель (и) скрыт?

Перемещение страниц карусели jQuery в IE и Microsoft Edge

Css, чтобы фоновое изображение растягивалось для заполнения окна. Плевать на соотношение сторон

Как выровнять текст в Firefox и Safari с помощью CSS?

Вызов изображений из базы данных создает пустые места в html

Упорядоченные изображения листинга в div

Ответы 1

Другие вопросы по теме

Похожие вопросы