Как расположить блоки произвольной высоты в колонки?
Приветствую.
Запамятовал. Есть блоки разной высоты, надо их расположить, к примеру, в три колонки так, чтобы нижний блок лип к верхнему. Вот так:
Подскажите, пожалуйста, как это сделать, не прибегая к JS.
P.S.
Забыл добавить, что код блоков выглядит так:
<ul> <li> <div class="title"></div> <div class="description"></div> </li> <li> <div class="title"></div> <div class="description"></div> </li> <li> <div class="title"></div> <div class="description"></div> </li> <li> <div class="title"></div> <div class="description"></div> </li> <li> <div class="title"></div> <div class="description"></div> </li> </ul> |
<ul> <li> <div class="title"></div> <div class="description"></div> </li> <li> <div class="title"></div> <div class="description"></div> </li> <li> <div class="title"></div> <div class="description"></div> </li> <li> <div class="title"></div> <div class="description"></div> </li> <li> <div class="title"></div> <div class="description"></div> </li> </ul>
Дополнительно:
Вы бы их хоть пронумеровали, чтобы было яснее)
Вариантов, в зависимости от нумерации, как минимум четыре:
1. flex
2. grid
3. column-count
4. JS-плагин `Masonry`
Ответы:
https://codepen.io/daemonhk/pen/xxaxmBa
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> li{ border: 2px solid black; display: inline-block; } ul{ display: flex; } </style> </head> <body> <ul> <li style="height: 300px;width: 225px;"> <div class="title"></div> <div class="description"></div> </li> <li style="height: 400px;width: 225px;"> <div class="title"></div> <div class="description"></div> </li> <li style="height: 450px;width: 225px;"> <div class="title"></div> <div class="description"></div> </li> <li style="height: 500px;width: 225px;"> <div class="title"></div> <div class="description"></div> </li> <li style="height: 300px;width: 225px;"> <div class="title"></div> <div class="description"></div> </li> </ul> </body> </html> |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> li{ border: 2px solid black; display: inline-block; } ul{ display: flex; } </style> </head> <body> <ul> <li style="height: 300px;width: 225px;"> <div class="title"></div> <div class="description"></div> </li> <li style="height: 400px;width: 225px;"> <div class="title"></div> <div class="description"></div> </li> <li style="height: 450px;width: 225px;"> <div class="title"></div> <div class="description"></div> </li> <li style="height: 500px;width: 225px;"> <div class="title"></div> <div class="description"></div> </li> <li style="height: 300px;width: 225px;"> <div class="title"></div> <div class="description"></div> </li> </ul> </body> </html>
- dumayu wy tak hoteli sdelat??
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для расположения блоков произвольной высоты в колонки можно воспользоваться CSS свойством `column-count`. Это свойство позволяет разделить контейнер на колонки заданного количества, в которых будут распределяться дочерние элементы.
Пример использования:
```html
.container {
column-count: 3; /* задаем количество колонок */
column-gap: 20px; /* задаем расстояние между колонками */
}
.item {
break-inside: avoid; /* предотвращает разрыв элементов между колонками */
margin-bottom: 20px; /* задаем отступ снизу для элементов */
}
```
В данном примере мы создаем контейнер с классом `container` и дочерние элементы с классом `item`. С помощью свойства `column-count` мы разбиваем контейнер на 3 колонки. Свойство `break-inside: avoid` предотвращает разрыв элементов между колонками, а `margin-bottom` задает отступ снизу для каждого элемента.
Таким образом, блоки произвольной высоты будут распределены в колонки с помощью CSS свойства `column-count`.