css 列：最后一列未填充

Question

我正在尝试使用column-countcss 属性div在 4 列中呈现s。

但是当列包装器中有 3n 个项目（3、6、9...）时，只有三列被填充，第四列是空的！

CSS：

.columns {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
}
.item {
    display: inline-block;
    widtth: 100%;
    border: 1px solid red;
}

HTML：

<div class="columns">
<div class="item">Lorem ipsum dolor sit amet 1</div><div class="item">Lorem ipsum dolor sit amet 2</div><div class="item">Lorem ipsum dolor sit amet 3</div>
<div class="item">Lorem ipsum dolor sit amet 4</div><div class="item">Lorem ipsum dolor sit amet 5</div><div class="item">Lorem ipsum dolor sit amet 6</div>
<div class="item">Lorem ipsum dolor sit amet 7</div><div class="item">Lorem ipsum dolor sit amet 8</div><div class="item">Lorem ipsum dolor sit amet 8</div>
</div>

这是一个JSFiddle。

如何获取所有 4 列中的元素？

Answer 1

在您的示例中，有 9 个大小相等的元素分布在 4 列中。由于当第一列包含 2 个元素（加起来最多为 8 个）时，它们将无法放入 4 列，因此第一列将包含 3 个元素。这定义了容器的高度，因此第二列也将获得 3 个元素，因此第三列还有 3 个剩余元素，第四列没有剩余元素。有四列，但第四列只​​是空的......

换句话说：容器的高度由将所有元素放入列数所需的最小高度决定。完成后，内容将从左侧开始填充到列中，每列将获得尽可能多的内容。

评论后补充：

要根据需要获得元素的分布，您必须插入空的 DIV - 没有其他方法（原因：阅读上文）：

.columns {
  -webkit-column-count: 4;
  /* Chrome, Safari, Opera */
  -moz-column-count: 4;
  /* Firefox */
  column-count: 4;
}

.item {
  display: inline-block;
  width: 100%;
  border: 1px solid red;
}
.empty {
  display: inline-block;
}

<div class="columns">
  <div class="item">Lorem ipsum dolor sit amet 1</div>
  <div class="item">Lorem ipsum dolor sit amet 2</div>
  <div class="item">Lorem ipsum dolor sit amet 3</div>
  <div class="item">Lorem ipsum dolor sit amet 4</div>
  <div class="item">Lorem ipsum dolor sit amet 5</div>
  <div class="empty"></div>
  <div class="item">Lorem ipsum dolor sit amet 6</div>
  <div class="item">Lorem ipsum dolor sit amet 7</div>
  <div class="empty"></div>
  <div class="item">Lorem ipsum dolor sit amet 8</div>
  <div class="item">Lorem ipsum dolor sit amet 8</div>
</div>