防止CSS‘列-跨:全部调到页面底部

Question

我有一个多列div (2-4列取决于我的应用程序中的设置)，它是由用户在文本编辑器中提供的标记生成的。在某些情况下，他们希望手动插入列中断。为了实现这一点，我提供了一个Markdown片段，它生成带有CSS属性break-after: column的div，以手动触发列中断。如果将其设置为display: block，则工作正常。但是，如果用户随后插入跨两列的div (使用CSS column-span: all)，则该跨列元素被分流到其包含元素的下面，任何进一步的文本都会完全消失，如下所示(特别是在最新版本的Chrome中)：

​

.container {
  column-count: 2;
  height: 60mm;
  border: solid black 1px;
}

.container .colbreak {
 color: red;
 break-after: column;
}

.container .wide {
  color: blue;
  column-span: all;
}

<div class="container">

  <p>left left left</p>
  <p>left left left</p>
   
  <div class="colbreak">Column Break</div>
  
  <p>right right right</p>
  <p>right right right</p>
  <p>right right right</p>
  <p>right right right</p>
  <p>right right right</p>

  <div class="wide">
    span all span all span all
    span all span all span all
    span all span
  </div>
  
  <p>more columns after</p>
  <p>more columns after</p>
  <p>more columns after</p>
  <p>more columns after</p>

</div>

​

这就是它看起来的样子(请注意“后面的更多列”段落缺失了)：

​

​

更改colbreak以拥有display: inline-block或其他方式似乎完全忽略了break-after: column (也许这才是真正的问题:为什么被忽略了内联块元素？)。

​

​

如下所示，我完全不包括colbreak div就可以得到相同的行为：

​

​

有人能解释一下如何达到预期的行为吗？由于这是在用户输入时实时呈现的，所以我希望通过不需要为每一列设置一个单独的div来维护列的自动平衡。在输入文本时，计算文本长度和高度，并在列之间动态移动它们，似乎要麻烦得多。如果用户更改为

Answer 1

如何实现接近预期结果的：

我认为如果您想了解更多关于多列css支持的内容，css-multicol将是很好的读物。

当前css的主要问题是height in container。要解决这个问题，您可以将容器放入另一个div中，并将其样式设置为所需的样式，这将使您尽可能接近所需的结果。

​

.main-container {
  height: minmax(min-content, 100mm);
  overflow: auto;
  border: solid black 1px;
}

.container {
  column-count: 2;
}

.container .colbreak {
  color: red;
  break-after: column;
}

.container .wide {
  color: blue;
  column-span: all;
}

<div class="main-container">
  <div class="container">
    <p>left left left</p>
    <p>left left left</p>

    <div class="colbreak">Column Break</div>

    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>

    <div class="wide">
      span all span all span all span all span all span all span all span
    </div>

    <p>more columns after</p>
    <p>more columns after</p>
    <p>more columns after</p>
    <p>more columns after</p>
  </div>
</div>

​

为什么容器上的高度不能按预期工作？

我相信这是经过设计的，至少从我阅读规范的理解来看是这样的：

跨越多列的元素称为生成元素，它创建的框称为扳手。 一个跨越的元素被取出流外，留下一个强制的间断.这不影响生成元素的绘画顺序CSS21。

更新：

为什么我的内联块元素被忽略了？：

这是因为break-word应该只为块级元素工作，就像按照W3C指南那样。

原始答案：，您需要将您的列内容包装成单独的div，并将column-count样式应用于该div，它将工作。

​

.container {
  height: 100mm;
  border: solid black 1px;
}

.col2 {
  column-count: 2;
}

.container .colbreak {
  break-after: column;
}

.container .wide {
  color: blue;
  column-span: all;
}

<div class="container">
  <div class="col2">
    <p>left left left</p>
    <p>left left left</p>
    <p>left left left</p>

    <div class="colbreak">Column Break</div>

    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
  </div>
  <div class="wide">
    span all span all span all span all span all span all span all span all span all span all span all span all span all span all span all
  </div>

</div>

​

或您可以使用CSS网格：

​

.container {
  height: 100mm;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 50% 50%;
}

.container .wide {
  color: blue;
  grid-column-start: 1;
  grid-column-end: -1;
}

<div class="container">
  <div>
    <p>left left left</p>
    <p>left left left</p>
    <p>left left left</p>
  </div>
  <div>
    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
  </div>
  <div class="wide">
    span all span all span all span all span all span all span all span all span all span all span all span all span all span all span all
  </div>
</div>

​

Answer 2

您可以尝试将列划分为2个div。它将分隔它们，允许将它们设置为单独的列，而不必插入中断。

​

.column {
  float: left;
  width: 50%;
}

<div class="container">
  <div class="column">
    <p>left left left</p>
    <p>left left left</p>
    <p>left left left</p>
  </div>

  <div class="column">
    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
    <p>right right right</p>
  </div>

  <div class="wide">
    span all span all span all span all span all span all span all span all span all span all span all span all span all span all span all
  </div>
</div>

​

Answer 3

建议您重新构造HTML代码并使用flexbox。它会让你更多地控制你的div的位置和你想玩它的内容的方式。此外，它是非常容易作出响应的挠性箱。

​

.container{
  width: 50%;
  border: 1px solid black;
}

.container .flex {
  display:flex;
  flex-direction: row;
  justify-content: space-around;
}

.container .wide {
  color: blue;
  column-span: all;
}

<div class="container">
  <div class="flex">
    <div>
  <p>left left left</p>
  <p>left left left</p>
  <p>left left left</p>
   <p>left left left</p>
 
   <p>left left left</p>
  <p>left left left</p>
  <p>left left left</p>
   <p>left left left</p>
  <p>left left left</p>
  <p>left left left</p>
   
  <div class="colbreak">Column Break</div>
  </div>
  <div class="flex-2">
  <p>right right right</p>
  <p>right right right</p>
  <p>right right right</p>
  <p>right right right</p>
  <p>right right right</p>
  <p>right right right</p>
  <p>right right right</p>
  </div>
</div>

<div class="wide">
  
  span all span all span all
  span all span all span all
  span all span all span all
  span all span all span all
  span all span all span all
</div>
</div>

​