CSS多列布局边距问题

Question

我有一个基于 CSS 的 2 列布局...

.mainContentSection {
  font-size: 1.1em;
  margin: 20px 10px 10px;
  padding: 0;
  -moz-column-count: 2; /* Firefox */
  -webkit-column-count: 2; /* Safari and Chrome */
  column-count: 2;
  -moz-column-gap:30px; /* Firefox */
  -webkit-column-gap:30px; /* Safari and Chrome */
  column-gap:30px;
}

.mainContentSection p {
  margin: 0 0 20px 0;
  padding: 0;
  border: 1px solid gray;
}

有时第二列的顶部会从上一段的底部捕捉到边距。如附图所示，这会推动下一段的顶部。我尝试过闯入，改变边距，内联块。所有人都取得了一些成功，但不是最佳的。我可以访问第二列以删除该边距吗？

Answer 1

我在 Safari 上遇到了同样的问题。 在列项目上添加display: inline-block 解决了我的问题。

Answer 2

我想我参加聚会有点晚了，但这里没有公认的答案是我的。

在进入重点之前，尽管它不应该影响您的问题，但强烈建议始终应用 column-width 和 column-count 值以获得更好的响应结果。

columns: [minimum width] [column count]

话虽如此，只需添加您的<p> 边距（边距：0 0 20px 0;）完全没问题，这是避免任何麻烦的方法。您只需将break-inside: avoid; 添加到它们，您就会看到神奇的发生。

三思考虑：

1. Break-inside 适用于内容元素，而不适用于父容器
2. Break-inside 浏览器兼容性依赖于不同的格式，而不仅仅是前缀
3. Break-inside 在动态更改其值时（例如从浏览器的检查器面板）会出现问题

也许这三个提示是您的尝试未能实现目标的原因。 所以你需要的代码是这样的：

.mainContentSection p {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin: 0 0 20px 0;
  padding: 0;
  border: 1px solid gray;
}

如果您想查看一个工作示例，您可以在这支笔中进行：https://codepen.io/elcssar/pen/dypGaWy

Answer 3

问题的根源似乎是在使用 column-count 时，浏览器对待 margin 和 padding 的方式不同，具体取决于元素的数量是偶数还是奇数。

这意味着像display: inline-block; width: 100%这样的解决方案；或与margin 或padding 一起玩会产生不一致的结果。

解决方案

我发现使此功能在浏览器中始终如一地工作的唯一方法是添加parent-element 和spacer。然后使用break-inside: avoid 将两个元素保持在一起。

HTML

<div class="mainContentSection">
  <div class="parent-element">    <!-- added this element -->
    <p>Blah blah blah blah</p>
    <div class="spacer"></div>     <!-- added this element -->
  </div>
  <div class="parent-element">   
    <p>Blah2 blah2 blah2 blah2</p>
    <div class="spacer"></div>   
  </div>

  <!-- addition items... -->

</div>

CSS

.mainContentSection{
  column-count:2
}
.parent-element{
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.spacer{
  height: 10px;
}

您可以将padding 添加到mainContentSection 或在段落上方添加另一个spacer，具体取决于您需要空间的位置。

问题

不一致的对齐似乎是由margin 和padding 对偶数或奇数个元素的不同处理造成的。我发现-top 和-bottom 确实如此，但为了简单起见，我在示例中只使用了margin-bottom。

偶数元素（工作正常）

当元素数量为偶数时，margin-bottom 有效。

奇数个元素（不起作用）

当有奇数个元素 margin-bottom 移动到第二列时，会产生错位。

其他解决方案

这意味着仅仅使用margin 或padding 会导致跨浏览器和设备的结果不一致。

使用display: inline-block; width:100% 几乎可以工作，但我发现对于某些浏览器/设备变体，如果只有两个元素，它会将两个元素保留在一列中，因为没有中断。这可以通过添加一个建议here 的中断来解决，但正如用户提到的，如果元素高度不同，它似乎会产生不一致的结果。

Answer 4

不要在.mainContentSection 元素上使用上边距，因此margin 行将读作：margin: 0 10px 20px 10px;

.mainContentSection {
  font-size: 1.1em;
  margin: 0 10px 20px 10px;
  padding: 0;
  -moz-column-count: 2; /* Firefox */
  -webkit-column-count: 2; /* Safari and Chrome */
  column-count: 2;
  -moz-column-gap:30px; /* Firefox */
  -webkit-column-gap:30px; /* Safari and Chrome */
  column-gap:30px;
}