css列:未填充最后一列 [英] css columns: last column is not filled

问题描述

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

I am trying to use column-count css property to render divs in 4 columns.

但是，当列包装器中有3n个项目(3、6、9 ...)时，只会填充三列，而第四列为空！

But when there are 3n items (3, 6, 9...) in columns wrapper, only three columns get filled, and fourth column is empty!

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列中的元素?

How do I get elements in all 4 columns?

推荐答案

在您的示例中，有9个大小相等的元素被分配到4列中.由于当第一列包含2个元素(总共最多为8个)时，它们将不适合4列，因此第一列将包含3个元素.这就定义了容器的高度，因此第二列也将获得3个元素，因此第三列还剩下3个元素，第四列没有任何元素.有四列，但是第四列是空的...

In your example, there are 9 elements of equal size to be distributed into 4 columns. Since they won't fit into 4 columns when the first column contains 2 elements (which would add up to a maximum of 8), the first column will contain 3 elements. That defines the height of the container, so the second column will also get 3 elements, and so there's also 3 remaining for the third column and none for the fourth column. There are four columns, but the fourth one is simply empty...

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

In other words: The height of the container is determined by the minimum height which is needed to fit all elements into the number of columns. Once that is done, the content will be filled into the columns starting from the left, and each column will get as much content as fits into it.

评论后添加:

要获得所需的元素分布，必须插入空的DIV-没有其他方法(原因:见上文):

To get a distribution of elements as you want it, you have to insert empty DIVs - there is no other way (reason: read above):

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

这篇关于css列:未填充最后一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！