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

Расположить шесть DIV в две колонки/три строки. Существует ли решение?

Имеется 6 блоков с заданной одинаковой шириной.
Необходимо их разместить в две колонки по 3 шт в каждой (ну, или в три строки, по два блока в каждой строке)

Суть вопроса в том, что высота каждого из дивов имеет различную высоту (значение которой вообще не предсказуемо, и определяется кол-вом контента в том или ином блоке). При этом "отступов" между вертикально расопложенными блоками быть не должно.

Т.е. грубо говоря, так правильно:

8c076f4be11c44639f64ca179ba494ba.png

а так - нет:

92460149ee294ff48aaa6ae82202f7d7.png

Решением, конечно, может быть создание "обертки" из двух "колонок", а них уже эти дивы, но хотелось бы обойтись без них, т.к. это нарушит адаптивность, которая подразумевает, что в низком разрешении все шесть блоков расположатся в одну колонку.

Есть ли вариант решения?
  • Вопрос задан
  • 8746 просмотров
Комментировать
Подписаться 10 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 4
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Вы, конечно, не первый, кто столкнулся с такой задачей.
masonry.desandro.com
Ответ написан
5 комментариев
5 комментариев
@TheBububo
обертки из 2 колонок не мешают адаптивности. Можно использовать float, тогда при маленькой ширине колонки будут одна под другой, а при достаточной ширине будут рядом.
Ответ написан
2 комментария
2 комментария
@GreatRash
Можо сделать на чистом CSS и HTML, но поддержка браузерами пока не очень. Как альтернативу massonry, я предлагаю salvattore.
Ответ написан
2 комментария
2 комментария
tolfy
@tolfy
Фирменный стиль
обычный html\css тоже справляется
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
<style type="text/css">
  html{height:100px;margin:0;padding:0;}
  body{margin:0;padding:0;}
  .L1,.R1,.L2,.R2,.L3,.R3{display:inline-block;}
  .L1,.L3,.R2{background-color:#EEE;}
  .L1,.R1,.L2,.R2,.L3,.R3{width:100%;}
  .dr{float:right;width:50%;}
  .dl{float:left;width:50%;}
@media screen and (max-width : 600px){.dr,.dl{float:none !important;width:100% !important;}
  .L1,.R1,.L2,.R2,.L3,.R3{display:block;}}
</style>
</head>
<body>
  <div class="dl">
    <div class="L1">L1
     <pre><br><br><br><br><br></pre>
    </div>
    <div class="L2">L2
    </div>
    <div class="L3">L3
     <pre><br><br><br><br><br></pre>
    </div>
  </div>
  <div class="dr">
    <div class="R1">R1
    </div>
    <div class="R2">R2
      <pre><br><br><br><br><br></pre>
    </div>
    <div class="R3">R3
    </div>
  </div>
</body>
</html>

пример на codepen
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать функционал сайта
18 дек. 2024, в 20:59
3000 руб./за проект
Конвертировать файл в формате mkv в mp4
18 дек. 2024, в 20:01
1 руб./за проект
Веб сервис для печатной мастерской (php+laravel+mysql)
18 дек. 2024, в 19:48
100000 руб./за проект
Ещё заказы