css - 列数 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

是的，这是正常行为。它将按指定值分隔元素或内容，column-count然后将其显示在columns. 如果您使用ul,或任何不是 a 的元素，ol它将垂直放置它们，这可能不是您想要的结果，但它绝对有意义。请参阅文档：https ://drafts.c​​sswg.org/css-multicol-1/#ccdivtexttext

如果您想将内部元素分成列并水平划分，您可以使用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>

编辑：

根据答案编辑，您已设置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>

Answer 2

检查您是否position:relative;使用了（我假设）li 元素。