css列：最后一列未填充

Question

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

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

这只是一个格式化问题。列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 3

尝试＆＃39; flexbox＆＃39; display: flex现在没问题了：）

official NuGet package

我希望得到帮助：）