column布局2列，内容跑到第二列了

Question

利用column布局2列，每个板块设置了margin-butto没，但是第一列的margin默认跑到了第二列，于是我设置break-inside，但是又出现只有一个板块的时候，部分内容跑到了第二列中显示了！

Answer 1

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

解决方案

你遇到的问题是因为 column 布局的默认行为是将内容分配到每个列中，而不是强制将内容保持在同一个列中。为了解决这个问题，你可以使用 column-fill 属性来控制内容的填充方式。

例如：

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

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

在上面的代码中，我们使用 column-fill: auto 属性来控制内容的填充方式，使其自动填充到每个列中。然后，我们使用 break-inside: avoid 属性来避免内容在每个列之间进行断开。

如果你想要在只有一个板块的时候，内容不跑到第二列中，可以使用 column-span 属性来控制内容的跨列行为。

例如：

.single-column {
  column-span: all;
}

在上面的代码中，我们使用 column-span: all 属性来使单个板块跨越所有列。

希望这些解决方案能够帮助你解决问题！