2

我有一个不同高度的块列表。

<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>

我希望它们使用 css column-count 属性在 3 列中流动。我不希望块被破坏，所以我应用 column-break-inside：避免。问题是当它被应用时，列的高度划分是非常不平等的。

.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，但当然固定高度是不好的，应该避免。为什么会发生这种情况以及如何使列的高度自然相等？

4

0 回答 0