Question

我有一个多列的div（2-4列，具体取决于我的应用程序中的设置），它是由用户在文本编辑器中提供的markdown实时生成的。在某些情况下，他们想手动插入分栏符。为此，我提供了一个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（也许这是 real 问题：为什么是break-after被忽略了我的行内阻止元素？：

如下所示，我完全不包含colbreak div来得到相同的行为：

任何人都可以解释如何实现所需的行为吗？由于这是在用户输入时实时显示的，因此我希望通过不为每列单独使用div来保持列的自动平衡。计算文本的长度和高度，并在输入时动态地在列之间移动它们，这似乎比所需要的麻烦得多。如果用户使用

更改设置，这也会停止工作

Answer 1

如何获得接近预期的结果：

如果您想了解有关多列CSS支持的更多信息，我认为css-multicol将是不错的选择。

您当前的CSS的主要问题是height中的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]。

更新：

为什么我的inline-block元素忽略了突破性行为？：

这是因为根据block-level elements，break-word仅适用于W3C guidelines。

原始答案： 您需要将列内容包装到单独的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的位置以及您要使用其内容的方式。另外，使用flexbox响应非常容易。

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

防止CSS`column-span：all`分流到页面底部

3 个答案: