是否有适用于 Firefox 和 Chrome 的 CSS 分栏符解决方案

Question

我有三列。我在每一列中使用“保持在一起”div 的方法来防止我的内容在我不想要的地方中断，并在我想要的地方强制中断。

第一栏的内容略多于其他两栏。如果 keep-together div 设置为 display: inline-block 它在 Firefox 中工作正常，但在 Chrome 中前两列之间的中断不会发生，因此只有两列。如果 div 设置为 display: block，它在 Chrome 中工作正常，但在 Firefox 中，第一段列底部的两条底线出现在第二列的顶部。

我创建了 this Codepen 来说明问题。

这是我的 CSS:

.three_col {
    overflow-y: visible;
    column-count: 3;
    column-gap: 40px;
    -moz-column-count: 3;
    -moz-column-gap: 40px;
    -webkit-column-count: 3;
    -webkit-column-gap: 40px;
}
.keep_together {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    break-after: always;
    page-break-after: always;
    clear: both;
    width: 100%;
}

这是我的 HTML:

<div class="three_col">
  <div class="keep_together">
  ... content ...
  </div>
  <div class="keep_together">
  ... content ...
  </div>
  <div class="keep_together">
  ... content ...
  </div>
</div>

Answer 1

您可以使用 flexbox 将 .three_col 的子项保持在一行中，如下所示：

.three_col {
  display: flex;
}
.keep_together {
  margin: 20px;
  flex: 1;
}

<div class="three_col">
<div class="keep_together">
<h2 style="color: #02b4f0;">Location 1</h2>
<p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p>
<p>Email:</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>
<div class="keep_together">
<h2 style="color: #62bb47;">Location 2</h2>
<p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p>
<p>Email:</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr </p>
</div>
<div class="keep_together">
<h2 style="color: #ef3781;">Location 3</h2>
<p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p>
<p>Email:</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</div></div>

您也可以使用 grid.

是否有适用于 Firefox 和 Chrome 的 CSS 分栏符解决方案

Is there a solution for CSS column breaks that works in both Firefox and Chrome

html

css

css-multicolumn-layout