为什么 3 列布局如此失败？答案

【问题标题】：Why does a 3 column layout fail so hard?为什么 3 列布局如此失败？
【发布时间】：2017-08-24 22:49:21
【问题描述】：

在第一个 sn-p 中，您应该会看到 4 张图片分组到左侧 2 列：
[+][+][ ]
[+][+]

并没有像我预期的那样分布在所有 3 列中：
[+][+][+]
[+]

更糟糕的是，即使是 3 列布局中的 3 个项目也会失败！我在 Chrome 中得到了这个：
[+][+][ ]
[+]

而不是这个（这似乎很明显）：
[+][+][+]

天哪，为什么？它是一个错误吗？还是没有明确设置列的高度？就流体/动态内容而言，显式高度对列的要求不高（这是我的情况）。

3 列中的 4 项（在 Chrome 和 Firefox 中失败）

p{
  -moz-column-count: 3;
  column-count: 3;
  -moz-column-gap: 0;
  column-gap: 0;
  -moz-column-fill: balance;
  column-fill: balance;
  outline:1px solid gray;
}

img{
  display: inline-block;
  width: 100%;
  height: auto;
  vertical-align: top;
  padding: 4px;
  box-sizing: border-box;
}

<p>
  <img src="http://placehold.it/300x250">
  <img src="http://placehold.it/300x300">
  <img src="http://placehold.it/300x300">
  <img src="http://placehold.it/300x250">
</p>

3 列中的 3 项（在 Chrome 中失败）

p{
  -moz-column-count: 3;
  column-count: 3;
  -moz-column-gap: 0;
  column-gap: 0;
  -moz-column-fill: balance;
  column-fill: balance;
  outline:1px solid gray;
}

img{
  display: inline-block;
  width: 100%;
  height: auto;
  vertical-align: top;
  padding: 4px;
  box-sizing: border-box;
}

<p>
  <img src="http://placehold.it/300x300">
  <img src="http://placehold.it/300x300">
  <img src="http://placehold.it/300x300">
</p>

https://jsfiddle.net/5wrpcky9/

【问题讨论】：

你的小提琴由于某种原因在我身上失败了，但是当我能够玩它时，我调整了 p 元素的高度并且能够将它推到第三列，很奇怪的行为。一旦小提琴再次为我工作，我会继续寻找
列现在在 chrome 中是错误的。请阅读“已知问题”caniuse.com/#feat=multicolumn
在 Firefox 中发现了相同的行为。
您是否阅读了我编辑的答案并查看了包含的示例？解释就在那里……
@Johannes 感谢您的意见。是的，我已经检查了您的答案，但对于我的第二次 sn-p 来说，它并没有真正成立，对吧？ 3 列中的 3 项 - 没有内容分布不均...见上文... 想法？此外，column-fill: balance 应该解决不均匀的项目拆分如此不均匀...

标签： html css css-multicolumn-layout

【解决方案1】：

（编辑：添加更多示例）

CSS column-count 表示内容首先放入第一行（在彼此下方），然后放入第二列，然后放入第三列（依此类推，如果还有更多)。 IE。垂直方向的放置顺序。

包含元素的 height （在您的情况下为 p 标记）由内容动态确定 - 内容尽可能均匀地分布在所有列中，在您的情况下真的不可能 - 三列中的 4 张图片，因此内容分布不均。看看你的小提琴的这个变体，我把第四张图片调高了一点，导致第四张图片进入第三列：https://jsfiddle.net/r002yvv3/

尝试使用六张图片，然后您就会明白我的意思了。 (https://jsfiddle.net/f7k4fph2/1/)。如果您只使用一些文本，您会看到更好，请参见以下示例：https://jsfiddle.net/p00syos5/

对于您想要实现的目标，您最好在图片上使用float:left，而不是段落中的column-count。 (https://jsfiddle.net/euuvf00z/1/) 但在这种情况下，高度应该匹配......

还有一点需要注意：在现实生活中，您不会将列属性分配给p 标记，而是分配给您将p 块、图像等放入其中的div 容器：https://jsfiddle.net/ygpk8pkc/

【讨论】：

我不确定这是否完全正确。当您说“高度允许”时，该高度是如何确定的？在这里，它只是一个没有指定高度的<p>。
我了解 column-count 应该如何工作，但是 - column-fill 应该最初设置为“平衡”，这对我来说意味着应该填充所有 3 列。我在代码 sn-p 中明确添加了column-fill 以证明它也失败了，无论余额是否为默认值...developer.mozilla.org/en-US/docs/Web/CSS/column-fill
对不起，写得不清楚（答案已更改）：包含元素的高度（在您的情况下为 p 标签）由内容决定 - 内容被平均分割尽可能多的所有列，在您的情况下这实际上是不可能的 - 三列中的 4 个图像，因此内容分布不均匀。
您的小提琴显示的第四张图片的高度更大，仅适用于我的 Firefox。在 Chrome 上，所有 4 仍然在左两列中......

【解决方案2】：

你可以试试这样的：

<html>
	<head>
		<style>
			p{
			    -moz-column-count: 3;
			    column-count: 3;
			    -moz-column-gap: 0;
			    column-gap: 0;
			}

			img{
				float: left; /*add*/
			    display: inline-block;
			    width: 100%;
			    height: auto;
			    vertical-align: top;
			    padding: 4px;
			    box-sizing: border-box;
			}

		</style>
	</head>
	
	<body>
		<p>
		    <img src="http://placehold.it/300x250">
		    <img src="http://placehold.it/300x300">
		    <img src="http://placehold.it/300x300">
		</p>

		<p>
		    <img src="http://placehold.it/300x250">
		</p>
	</body>
</html>

【讨论】：

我确信重点是不要这样做，并根据窗口大小和媒体查询来控制列数中的元素数。
每列也有不同大小的高度，这会破坏列的目的，它会在某些元素之间产生不希望的间隙
@ntgCleaner 你绝对正确，我不这么认为。我不明白的一件事是，如果你改变 img 标签的位置，将 300x250 img 标签放在一起（这个浮动：左）它的工作......
只有在同时使用完全相同大小的元素时，向左浮动才有效。否则，当右边的最后一个元素比左边下一行的下一个元素高时，将会有一个可怕的差距。 Float 非常适合类似的元素