CSS多列等宽布局是一个非常实用的布局方式，在需要展示多个数据项的时候可以大大提高页面的可读性和美观度。
实现这种布局方式的关键是使用CSS的弹性盒子布局，通过设定包含容器的宽度和每个子元素的宽度，可以轻松实现等宽布局。
.wrapper{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item{
width: 30%;
}在上述代码中，我们通过设置包含容器为弹性盒子布局，并使用flex-wrap: wrap属性实现了内容以自动换行的方式展示，同时又通过justify-content: space-between属性保持了每个元素之间的间距。
每个子元素的宽度我们设置为30%，这样可以保证在包含容器宽度大于等于3倍每个子元素宽度的情况下，每一行都可以放置三个等宽的元素。
接下来我们只需要在包含容器中添加多个类名为.item的元素即可实现多列等宽布局。
本文链接：https://my.lmcjl.com/post/13013.html
展开阅读全文
4 评论