Html 为什么文本和内联内容在列中分布不均匀？

我在多列设计中有内联块元素的段落，内容分布不均匀，代码如下：

<style>
.col { column-count: 2; }
</style>

<div class="col">
<p> ...Some text... <img src="with-some-height">
<p> ...Egestas magna Some longer text...
</div>

.col{列计数：2；}
…一些文本。。。
…Egestas magna一些较长的文本。。。

在宽度为1600px的文本中，我希望第二列中的文本Egestas magna能够均匀地使用空间。当我删除

标记时，结果会更好，但仍然不是最优的。如果有必要的话，我会用Opera 62

---

请解释如何计算空间，以及是否有CSS方法使列更均匀。我需要两个高度未知的列设计。

由于您的解释有点简单，因此无法确切确定您希望列的间距，但我建议使用“flex”属性使其具有响应性

justify内容

对齐项目

---

flex和grid是均匀分配未知尺寸容器的最佳选择。

您有一个空的

div

，其中

高度为250px

，这会在第一列中产生大量的空空间。您也没有关闭

p

标签

如果您的修复程序符合要求：

---

（请注意，我在该小提琴中添加了

.col>p:first类型{margin top:0；}

，以避免第一段上方的默认空格，否则会在第一列和第二列中产生不同的顶部边距。）

Uable要用小提琴复制-@Paulie_D，我看到FF和Chrome之间有明显的区别。FF在列之间的内容分布更好。div模拟文本中的图像。文本分布均匀，但文本中的大型内联块元素（如div）会将其弄乱。我希望列的高度相似，即使它们包含内联块元素。结束p标记“我希望列的高度相似，即使它们包含内联块元素。”-这应该如何工作？内联和内联块元素仍然绑定到它们在其他元素中的位置，如果它们没有

position:absolute

，它们就会出现在内容中。这些元素会增加内联内容的总高度。我希望内容中的列换行在列高度差异最小的地方。在这个例子中，右列要短得多，如果列换行正好在内联块元素之后就更好了。我想要一个连续的文本（带有像图像这样的内联块元素）均匀地分布在两列中，而不会将内容与div标记混淆，比如“这是前半部分，这是第二部分”。这在flex/grid中仍然是可能的。。。。“div标记如‘这是前半部分，这是第二部分’的确切含义是什么？”浏览器应将软列包装放置在列高度相似的位置，因此有时（屏幕大小调整、添加动态内容等）部分内容可能会从第一列移动（溢出）到第二列（或返回）。我无法想象如何通过flex实现这一点。