[分享]css中如何设置多列的列高

.container { column-count: 3; /* 将容器分为3列 */ column-gap: 20px; /* 列之间的间距为20px */ } .box { margin: 10px; /* 盒子的外边距 */ break-inside: avoid; /* 避免盒子被分列 */ background-color: #ccc; /* 盒子的背景色 */ padding: 10px; /* 盒子内部的padding */ text-align: center; /* 文字居中 */ } .box-1 { height: 100px; /* 盒子高度为100px */ } .box-2 { height: 150px; /* 盒子高度为150px */ } .box-3 { height: 50px; /* 盒子高度为50px */ }

在CSS中，我们可以使用column-count和column-gap属性来设置多列布局和列间距。

在上面的代码中，我们将容器.container分为3列，列之间的间距为20px。如果我们不设置break-inside:avoid属性，当盒子的高度超过一列时，会将盒子分为多列显示，这样就无法保证所有盒子在同一列中显示。

因此，我们使用break-inside:avoid属性来避免盒子被分列。我们还设置盒子的外边距、背景色、内部padding和文字居中等样式，以及不同高度的盒子.box-1、.box-2、.box-3。

通过以上CSS样式设置，我们就可以实现多列布局，并控制盒子的高度，确保所有盒子在同一列中显示。