2

我有一个基于 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;
}

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

在此处输入图像描述

4

4 回答 4

1

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

在进入重点之前，尽管它不应该影响您的问题，但强烈建议始终同时应用 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

于 2020-12-06T13:39:43.047 回答
1

问题的根源似乎是在使用浏览器时会根据元素的数量是偶数还是奇数而区别column-count对待。marginpadding

这意味着像这样的解决方案display: inline-block; width: 100%；或玩弄margin或padding创建不一致的结果。

解决方案

我发现让这个在浏览器中始终如一地工作的唯一方法是添加 aparent-element和 a 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%几乎可以工作，但我发现对于一些浏览器/设备变体，如果只有两个元素，它将两个元素保留在一列中，因为没有中断。这可以通过添加此处建议的中断来解决，但正如用户提到的，如果元素高度不同，它似乎会产生不一致的结果。

于 2020-12-24T22:12:59.553 回答
1

我对 Safari 也有同样的问题。添加display: inline-block列项目为我解决了这个问题。

于 2020-09-21T09:21:09.357 回答
0

只需不要在.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;
}
于 2015-11-18T00:39:42.027 回答