今天给大家安利的是一个多列布局的实践 ：Columns ，特别简单，用到的属性是 column-count，column-width，column-gap 为什么会用到 Columns 场景是因为只想在手机上显示两栏，每一个.item都是从后台动态获取 然后遍历出来 渲染到页面
布局如图：
概念解释：
column-width：[<length> | auto] 中括号里边<length>长度单位； auto是默认值 由浏览器决定列宽；
column-count：auto | 整数 auto由其他属性决定列数，比如 "column-width"；
column-gap：normal | <length> normal 为默认值，默值为1em（如果你的字号是px伫值，其默认值为你的font-size值）；length 设置列与列之间的距离。
理解完概念之后上代码：
HTML：
1
2
3
4
5
6
CSS:
*{
margin:0;
}
.wrapper{
padding:10px;
}
.inner_wrapper{
column-count: 2;
column-width:100px;
column-gap: 10px;
}
.item{
position: relative;
}
.count{
position: absolute;
bottom: 4px;
text-align: center;
background:rgba(47, 37, 37, 0.5);
display: inline-block;
width: 100%;
color: #fff;
}
img{
width: 100%
}
运行完就会得到上图的结果，设置 column-count: 2; column-width:100px; column-gap: 10px; 是核心点，需要注意的一点是：column-count的值大于2时 inner_wrapper的宽度 < column-width*column-count + padding*2 + margin*2 + column-gap*(column-count-1) 时 本来很简单的东西被这个公式写完之后有点乱了，没关系，看个动图: 为了方便讲解我本地设置column-count: 3时的效果，右上角340px是一个边界，小于340px时会变两列；
因为当 column-count: 2 设置为2 时。变成单列时有一个区间值，而不是一个特定的值
看图：
以上，但是不影响布局效果的实现，多栏布局其实也可以做到响应式的效果
运行完就会得到上图的结果，设置 column-count: 2; column-width:100px; column-gap: 10px; 是核心点，需要注意的一点是：column-count的值大于2时 inner_wrapper的宽度 < column-width*column-count + padding*2 + margin*2 + column-gap*(column-count-1) 时 本来很简单的东西被这个公式写完之后有点乱了，没关系，看个动图: 为了方便讲解我本地设置column-count: 3时的效果，右上角340px是一个边界，小于340px时会变两列；
因为当 column-count: 2 设置为2 时。变成单列时有一个区间值，而不是一个特定的值
看图：
以上，但是不影响布局效果的实现，多栏布局其实也可以做到响应式的效果
本文来自投稿，不代表科技代码立场，如若转载，请注明出处https://www.cwhello.com/4458.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
