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

这只是格式问题。 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>

Answer 2

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

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

评论后添加：

要获得所需的元素分布，您必须插入空 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 3

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

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

希望有所帮助:)

css 列：最后一列未填写

css columns: last column is not filled

css

multiple-columns

css-multicolumn-layout