Html 阻止CSS`列跨度：全部`分流到页面底部

我有一个多列div（2-4列取决于我的应用程序中的设置），由用户在文本编辑器中提供的标记实时生成。在某些情况下，他们希望手动插入分栏符。为了实现这一点，我提供了一个降价代码段，该代码段使用CSS属性

break after:column

生成一个div，以手动触发分栏。如果将其设置为

display:block

，则工作正常。但是，如果用户随后插入一个跨两列的div（使用CSS

column span:all

），则该跨列元素将被分流到其包含元素的下方，并且任何进一步的文本将完全消失，如下所示（特别是在最新版本的Chrome中）：

.container{
列数：2；
高度：60毫米；
边框：纯黑1px；
}
.集装箱.冷藏箱{
颜色：红色；
断开后：列；
}
.集装箱.宽{
颜色：蓝色；
柱跨：全部；
}

左左

左左

分栏符
对对对

对对对

对对对

对对对

对对对

全部全部全部全部全部全部全部全部
全部全部全部全部全部全部全部全部
跨越所有跨度
之后有更多的专栏

之后有更多的专栏

之后有更多的专栏

之后有更多的专栏

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

如果你想了解更多关于多列css支持的信息，我想这将是一本不错的书

当前css的主要问题是

容器中的
高度
。要解决这个问题，您可以将容器放在另一个
div
中，并使用您想要的样式对其进行样式设置，这将为您提供尽可能接近您想要的结果的样式


.main容器{
高度：最小最大值（最小含量，100mm）；
溢出：自动；
边框：纯黑1px；
}
.集装箱{
列数：2；
}
.集装箱.冷藏箱{
颜色：红色；
断开后：列；
}
.集装箱.宽{
颜色：蓝色；
柱跨：全部；
}

左左

左左

分栏符
对对对

对对对

对对对

对对对

对对对

全部跨度全部跨度全部跨度全部跨度全部跨度全部跨度全部跨度全部跨度全部跨度
之后有更多的专栏

之后有更多的专栏

之后有更多的专栏

之后有更多的专栏

您可以尝试将列分成两个div。它将它们分开，允许将它们设置为单独的列，而不必插入分隔符


.column{
浮动：左；
宽度：50%；
}

左左

左左

左左

对对对

对对对

对对对

对对对

对对对

对对对

对对对

全跨全跨全跨全跨全跨全跨全跨全跨全跨全跨全跨全跨全跨全跨全跨全跨
建议您重新构造HTML代码并使用flexbox。它会让你更多地控制你的DIV的位置，以及你想玩它的内容的方式。此外，使用flexbox非常容易响应


.container{
宽度：50%；
边框：1px纯黑；
}
.container.flex{
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
}
.集装箱.宽{
颜色：蓝色；
柱跨：全部；
}

左左

左左

左左

左左

左左

左左

左左

左左

左左

左左

分栏符
对对对

对对对

对对对

对对对

对对对

对对对

对对对

全部全部全部全部全部全部全部全部
全部全部全部全部全部全部全部全部
全部全部全部全部全部全部全部全部
全部全部全部全部全部全部全部全部
全部全部全部全部全部全部全部全部
这是我们早期尝试过的，但正如您所见，分栏符不再出现在所需位置（一些“右”段位于左侧）。当我们更改
colbreak
div的显示类型时，“break after:column”似乎被忽略了。@TrevorBuckner我有点误解了，让我更新anwer。在单独的div中包装column内容将提供所需的行为。这是一个有趣的选项。本质上，我们只是从2列块中删除
wide
div。但是，如果可能的话，我希望允许在恢复2列行为的
wide
块之后添加额外的文本。此HTML由文本框中的用户提供标记实时生成，因此如果可能的话，降低多个div的复杂性将是理想的（每次我们在2列之间交换一个新div）。我认为解决这个问题的关键可能是：“当我的元素使用
display:inline block
时，为什么会忽略break after？”请参阅我更新的问题。（这很好，给了我一些想法）@TrevorBuckner检查我的更新答案，
在
之后中断应该只对
块级
元素有效，而不是内联。嗯。。。如果可能的话，我希望避免对每一列使用单独的
div
s，因为一旦文本到达容器底部，它就会删除自然的断列行为。但到目前为止，这似乎是最好的捕获了所需的行为，并且可能是可行的……老实说，您也可以创建一个包含2列的表，并将最下面一行colspan=2tanks作为答案。如果可能的话，我希望避免每个列使用单独的div，因为它删除了自然的colu