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

只是不要在.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;
}

Answer 2

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

Answer 3

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

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

columns: [minimum width] [column count]

话虽如此，只需添加您的<p>边距（边距：0 0 20px 0;）就可以了，这是避免任何麻烦的方法。您只需向他们添加break-inside: avoid;，您就会看到魔术的出现。

三点考虑：

1. 内部破坏适用于内容元素，而不适用于父容器
2. 内部漏洞浏览器兼容性以不同的格式传递，不仅仅是前缀
动态更改其值时（例如从浏览器的检查器面板中），
3. 中断出现问题

也许这三个技巧是您的尝试未能实现目标的原因。 因此，您需要的代码是这样的：

.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 4

问题的根源似乎是在使用 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，但正如用户提到的，如果元素高度不同，它似乎会产生不一致的结果。