列计数3不会留下包含1个项目的行

Question

我注意到，当我在代码中使用column-count: 3时，我有7个条目。前两列各有3个元素，第三列只有一个元素(例如，见图片)。

这是column-count的正常行为，还是column-count应该均匀填充所有列？

​

​

更新-

我尝试修改caiovisk答案，并将代码从li元素更改为div，因为这就是我正在使用的。

这似乎很有效，但在我的情况下，有时元素可能会比其他元素更大，从而导致差距(见下图)。如何使用flex方法解决此问题？

​

.columns-3 {
		flex-basis: calc(33.33% - 20px);
		margin: 10px;
	}
	.redBox {
		height: 50px;
		background-color: red;
	}
	.bigger {
		height: 150px;
	}

<div class="columns">
		<div class="columns-3 redBox bigger"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox bigger"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox bigger"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
	</div>

​

​

​

Answer 1

检查(我假设) li元素上是否有position:relative;。

Answer 2

是的，这是正常的行为。它将在column-count上用指定的值分隔元素或内容，然后在columns中显示它。如果你使用的是ul，ol，div或者任何不是text的元素，它会垂直放置它们，这可能不是你想要的结果，但是对于text来说这是绝对有意义的。请参阅文档：https://drafts.csswg.org/css-multicol-1/#cc

如果您想要将内部元素划分为列并水平划分，您可以使用flexbox，请参阅下面的方法：

​

.columns{
    display: flex;
    flex-wrap: wrap;
}
.columns-2 li {
    flex-basis: 50%;
}
.columns-3 li {
    flex-basis: 33.3334%;
}
.columns-4 li {
    flex-basis: 25%;
}

<h1>2 Columns</h1>
<ul class="columns columns-2">
<li>Column 1</li>
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
<li>Column 7</li>
</ul>
<h1>3 Columns</h1>
<ul class="columns columns-3">
<li>Column 1</li>
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
<li>Column 7</li>
</ul>
<h1>4 Columns</h1>
<ul class="columns columns-4">
<li>Column 1</li>
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
<li>Column 7</li>
</ul>

​

编辑：

根据答案edit，您已经将height: 50px;设置为您的.redbox，并且它限制元素填充高度。将其设置为min-height: 50px;

.redBox {
        min-height: 50px;
        ...
}

​

.columns {
		display: flex;
    flex-flow: wrap;
}
.columns.columns-3 > div {
    flex-basis: calc(33.33% - 20px);
    margin: 10px;
}
.columns.redBox > div {
    min-height: 50px;
    background-color: red;
}
.bigger {
    height: 150px;
}

<div class="columns columns-3 redBox">
  <div class="bigger"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="bigger"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="bigger"></div>
  <div></div>
</div>

​