Задать вопрос
weranda
@weranda
html

Как расположить блоки произвольной высоты в колонки?

Приветствую.
Запамятовал. Есть блоки разной высоты, надо их расположить, к примеру, в три колонки так, чтобы нижний блок лип к верхнему. Вот так:
64dc9453c4944064318662.png
Подскажите, пожалуйста, как это сделать, не прибегая к 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>
  • Вопрос задан
  • 148 просмотров
5 комментариев
Подписаться 2 Простой 5 комментариев
Пригласить эксперта
Ответы на вопрос 2
@apoca1ipsis
https://codepen.io/daemonhk/pen/xxaxmBa
Ответ написан
Комментировать
Комментировать
@maya01 
<!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>
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Seo оптимизация корпоративного сайта
30 апр. 2024, в 10:55
25000 руб./за проект
Программа-тренажёр для решения задач целочисленного программирования
30 апр. 2024, в 10:36
12000 руб./за проект
Разработка микросервисов : Личный кабинет, BackOffice (Micronaut)
30 апр. 2024, в 07:44
15000 руб./за проект
Ещё заказы