使用column-count css标签时文本列的垂直对齐？答案

【问题标题】：Vertical alignment for columns of text when using the column-count css tag?使用column-count css标签时文本列的垂直对齐？
【发布时间】：2020-11-12 01:20:11
【问题描述】：

我正在使用 CSS column-count 标签在 HTML 页面上将一些文本分成四列。

第一列在垂直方向上总是比其他三列低一点。

我已将其归结为最简单的示例，您可以在下面或this JSFiddle 中看到。

为什么第一列顶部有多余的空间？如何让它们对齐？

.column-text{
  column-count: 4;
  column-gap: 10px;
  column-rule: 1px dotted #d5d5d5;
  font-size: large;
}

<div class="column-text">
  <div>
    <p>Why am I lower</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

在第一段添加了边距。您可以通过将此行添加到 CSS 来删除它：.column-text div:first-child p:first-child { margin: 0; }

.column-text{
  column-count: 4;
  column-gap: 10px;
  column-rule: 1px dotted #d5d5d5;
  font-size: large;
}

.column-text div:first-child p:first-child {
  margin: 0;
}

<div class="column-text">
  <div>
    <p>Why am I lower</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
</div>

【讨论】：

谢谢你，成功了。为什么第一段要加边距？这只是列数的“功能”吗？
是的，它是默认的边距行为。很高兴它有效，如果能解决您的问题，请将其标记为 anwser。
很高兴！知道为什么这种默认边距行为只影响第一个
，而不影响其他的吗？

【解决方案2】：

这是<p> 标签的垂直边距。在其他情况下，它们会崩溃 - 这是边距的标准行为。

【讨论】：

很公平，但为什么只影响第一个？
@JosephStyons 这适用于所有人。在显示块大小的开发者面板中查看代码执行结果。

【解决方案3】：

在 js fiddle 中，看起来其他的边距有点重叠父容器。

你可以试试这个

.column-text p {
  display: inline-block;
}

这应该使它们看起来都一样

【讨论】：

它们没有重叠，这是默认的边距行为。为什么要将段落更改为内联表，这会导致其自身的问题？
感谢您的回复，但这并不能解决问题。
true 我把它改成了 inline-block。
inline-block 确实消除了边距，但它具有将文本不同列相互包装的副作用。