在做react项目中,习惯了用
24等分,这时需要个需求,一行五个盒子,并排,盒子数量不确定, 的span属性不支持小数,这是就只能自己写了,此时有两种方法flex 布局和 百分比布局,flex布局并没有找到合适做法,只能自己写个并排布局
不能不能直接用li来margin,因为宽度固定了,左右margin整个宽度会超过100%
-
1
-
2
-
3
-
4
-
5
-
6
-
7
需要把左右靠边的盒子左和右margin去掉
ul {
overflow: hidden;
}
li {
margin-bottom: 10px; //上下偏移在li中用margin
list-style: none;
float: left;
width: 20%;
height: 50px;
}
.box{
margin:0 10px; //左右偏移在div中
height: 100%;
border:2px solid #000;
}
li:nth-child(5n+1) .box{ //最左侧盒子去掉左边margin
margin-left:0;
background: skyblue;
}
li:nth-child(5n) .box{ //最右侧盒子去掉左边margin
margin-right: 0;
}