css列：最后一列未填充[重复]

Question

我正在尝试使用column-count css 属性在 4 列中呈现 divs。

但是当列包装器中有 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>

Answer 2

试试 'flexbox' display: flex 现在没问题了 :)

https://jsfiddle.net/bnmkzrkx/4/

希望能帮到你:)

Answer 3

这只是一个格式问题。 CSS 列被代码中的空格弄糊涂了。有人可能会对为什么会发生这种情况给出更技术性的解释。

https://jsfiddle.net/bnmkzrkx/1/

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

<div class="columns">
<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>