1

Имеется набор инлайн-блоков переменной высоты. Четным задано обтекание справа, нечетным - слева. Результат на картинке ниже.

До блока 2 все расположилось как надо, затем 3 блок должен был оказать слева, но зацепился за 1 блок и после него блоки начали цеплятся друг за друга, и порядок нарушился.

Как расположить блоки в двух колонках, чтобы они не цепляли друг друга и заполняли колонки без пропусков?

введите сюда описание изображения

Код

.property-group {
  border: solid 1px #d9d9d9;
  background-color: #f5f5f5;
  width: 245px;
  padding: 10px;
  box-sizing: border-box;
  display: inline;
  margin-bottom: 10px;
}
.property-group:nth-child(odd) {
  float: left;
}
.property-group:nth-child(even) {
  float: right;
}
.property-group__title {
  color: #757575;
}
.property-group__item {
  color: #757575;
}
<div class="table">
  <div class="property-group"><div class="property-group__title">1</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div></div>
  <div class="property-group"><div class="property-group__title">2</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div></div>
  <div class="property-group"><div class="property-group__title">3</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div></div>
  <div class="property-group"><div class="property-group__title">4</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div></div>
  <div class="property-group"><div class="property-group__title">5</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div></div>
  <div class="property-group"><div class="property-group__title">6</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div><div class="property-group__item">text</div></div>
</div>

Финальный результат необходим такой:

введите сюда описание изображения

6

2 ответа 2

2

Используйте display: flex;

Вот полная документация: http://frontender.info/a-guide-to-flexbox/

.flexboxes {
  display: flex;
  flex-wrap: wrap;
  height:200px;
  flex-direction: column;
}
.flexboxes > div {width:200px;background-color:red;margin:3px;}
.block0 {height: 60px;}
.block1 {height: 80px;}
.block2 {height: 70px;}
.block3 {height: 90px;}
.block4 {height: 80px;}
.block5 {height: 100px;}
<div class="flexboxes">
  <div class="block0"></div>
  <div class="block1"></div>
  <div class="block2"></div>
  <div class="block3"></div>
  <div class="block4"></div>
  <div class="block5"></div>
</div>

5
  • я вижу тут 3 колонки
    – teran
    19 фев 2017 в 20:02
  • @teran это пример. Его можно адаптировать под любое количество колонок. 19 фев 2017 в 20:03
  • не получилось адаптировать под образец, возможно, я то-то не понимаю, добавил образец в вопрос
    – while1pass
    19 фев 2017 в 21:44
  • @while1pass обновил ответ. 19 фев 2017 в 23:01
  • почти, но как не ограничиваться высотой? при heigh: 100% все блоки выстраиваются в одну колонку. я понимаю, что могу подобрать высоту под свое количество блоков, но как-только добавится еще один непридусмотренный, он вылезет еще одной колонкой. а нужно именно две колонки
    – while1pass
    20 фев 2017 в 8:05
1

Решение нашлось, благодаря совету Sasha Omelchenko из этого вопроса.

Для родительского контейнера необходимо задать свойство column-count

.details {
    position: absolute;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    width: 400px;
}

.property-group {
    border: solid 1px #d9d9d9;
    width: 200px;
    padding: 10px;
    box-sizing: border-box;
    display: inline-block;
    margin-bottom: 10px;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15);
}
<div class="details">
  <div class="property-group" style="height: 100px;">1</div>
  <div class="property-group" style="height: 50px;">2</div>
  <div class="property-group" style="height: 200px;">3</div>
  <div class="property-group" style="height: 70px;">4</div>
  <div class="property-group" style="height: 100px;">5</div>
  <div class="property-group" style="height: 90px;">6</div>
  <div class="property-group" style="height: 40px;">7</div>
  <div class="property-group" style="height: 110px;">8</div>
  <div class="property-group" style="height: 100px;">9</div>
  <div class="property-group" style="height: 100px;">10</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.