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

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

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

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

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

8c076f4be11c44639f64ca179ba494ba.png

а так - нет:

92460149ee294ff48aaa6ae82202f7d7.png

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

Есть ли вариант решения?
  • Вопрос задан
  • 8765 просмотров
Комментировать
Подписаться 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 комментария
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Frontend разработчик
Битворкс
от 2 500 до 4 000 $
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 120 000 ₽
Ещё вакансии