Высота CSS-столбцов не равна столбцу-break-inside: избегать

У меня есть список блоков разной высоты.

<div class="container">
  <div class="block">
    <div class="item">abcxyz</div>
    <div class="item">abcxyz</div>
    <div class="item">abcxyz</div>
  </div>
  <div class="block">
    <div class="item">abcxyz</div>
  </div>
...
</div>

Я хочу, чтобы они текли в 3 столбца, используя свойство css column-count. Я не хочу, чтобы блоки были разбиты, поэтому я применяю разбиение на столбцы: избегайте. Проблема в том, что когда он применяется, то деление высоты столбцов очень неравномерно.

.container {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  height: 180px;
}
.block {
  padding: 10px;
  border-bottom: 2px solid #97979b;
  -webkit-column-break-inside:avoid;
  -moz-column-break-inside:avoid;
  -o-column-break-inside:avoid;
  -ms-column-break-inside:avoid;
  column-break-inside:avoid;
}

См. Этот кодовый блок http://codepen.io/KwiZ/pen/PwmXPB. Разделение по высоте могло бы быть лучше, например, когда я установил фиксированную высоту для контейнера: http://codepen.io/anon/pen/emWbmm, но, конечно, фиксированная высота плохая и ее следует избегать. Почему это происходит и как сделать высоту столбцов естественно равной?

0 ответов

Другие вопросы по тегам