如何使区块在切换到新列时保持不可拆分？附代码示例

这个需求很好实现，只需要给你的.entry元素加一行CSS就能搞定！

核心解决方案 #

给.entry设置break-inside: avoid;属性——它的作用就是明确告诉浏览器：不要把这个元素拆分到不同的列里。

如果要兼容一些旧版浏览器（比如老版本Safari），可以再补上page-break-inside: avoid;作为降级方案，这个属性原本用于打印时避免元素跨页，但多数浏览器在列布局场景下也会识别它。

完整代码示例 #

CSS #

.container {
  column-count: 2;
  width: 50%;
  border: 1px solid;
}
.entry {
  border: 1px dotted red;
  /* 核心：阻止元素被列拆分 */
  break-inside: avoid;
  /* 兼容旧版浏览器的降级写法 */
  page-break-inside: avoid;
}

HTML #

<div class="container">
  <div class="entry">
    <h3>header 1</h3>
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
  </div>
  <div class="entry">
    <h3>header 2</h3>
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
  </div>
</div>

原理说明 #

break-inside: avoid是CSS多列布局模块的标准属性，它会阻止浏览器在当前元素内部插入列分隔符。这样每个.entry区块就会作为一个整体存在：要么完全留在当前列，要么被完整推到下一列，绝不会出现被拆分的情况。

内容的提问来源于stack exchange，提问作者serge