利用cloumn布局2列，但是当只有一个板块内容的时候！下面部分内容跳到第二列显示了，我每一个板块设置了margin_bottom，也设置了break-inside，没用！

Question

column设置两列，流式布局，根据板块实际高度不等高显示，但是当只有一个板块的时候，板块底部部分内容显示到了第二列，设置了break-inside也没有效果！我对每个板块设置了margin-buttom，不设置margin-buttom的时候，就不会显示到第二列去！板块之间的行间距没有！

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

你遇到的问题是因为 break-inside 属性只能在块级元素上生效，而你使用的 column 元素是一个容器元素，而不是块级元素。为了解决这个问题，你可以使用 column-gap 属性来设置列之间的间隙，然后使用 margin-bottom 属性来设置板块的底部间隙。

例如：

<div class="columns">
  <div class="column">
    <!-- 你的板块内容 -->
  </div>
</div>

.columns {
  column-count: 2;
  column-gap: 20px;
}

.column {
  break-inside: avoid;
  margin-bottom: 20px;
}

在上面的代码中，我们使用 column-count 属性设置了两列，然后使用 column-gap 属性设置了列之间的间隙为 20px。然后，我们使用 break-inside 属性来避免板块内容跨越列边界，并使用 margin-bottom 属性来设置板块的底部间隙为 20px。

这样，当只有一个板块的时候，板块的底部部分内容将不会显示到第二列中。