多种⽅式实现平均分栏布局（有间距）div平分⾏宽
以下例⼦基于分四栏+栏间有间距的例⼦分析
效果图：
html代码：
<div class="buy-one-buy">
<h3>淘⼀淘</h3>
<ul>
<li><img src="../img/homePage/rotation-1.jpg" alt="First buy"></li>
<li><img src="../img/homePage/rotation-1.jpg" alt="Second buy"></li>
<li><img src="../img/homePage/rotation-2.jpg" alt="Third buy"></li>
<li><img src="../img/homePage/rotation-3.jpg" alt="Four slide"></li>
</ul>
</div>
1.最简单粗暴的⽅式就是通过固定值+margin去计算
⾸先我先固定了最外层的宽度为1200px;（这⾥为1202px宽度是因为我加了⼀个红边框⽅便观察，最后页⾯显⽰的时候要记得把border 去掉并且宽度改为1200px）
.buy-one-buy{
width: 1202px;
border: 1px solid red;
margin: 0 auto;
}
之后我将每个li的宽度固定为288px(四个li即为1152px，剩下还有1200px-1152px=48px作为四栏中的间距（四栏共有三个间距，则48px/3=16px)。因此我给每个li设置margin-right为16px，当然最后⼀个li中的amrgin-right要设置为0。) 注意：因为li是块元素，我⾸先先把它转换为⾏内块元素再进⾏操作。所以先在ul中清除掉⾏内块的默认间距（font-size:0）。
.buy-one-buy ul{
font-size: 0;
}
.buy-one-buy li{
display: inline-block;
width: 288px;
height: 140px;
margin-right: 16px;
}
.buy-one-buy li:last-child{
margin-right: 0;
}
最后就能实现上图中的分栏效果了
2.使⽤第⼀种⽅法会使得页⾯维护起来很⿇烦，每次宽度都要去计算。所以后来，我使⽤float+margin+百分⽐实现⼀样的效果，之后维护只需要修改相应的百分⽐即可
⾸先依旧固定住最外层的宽度
.buy-one-buy{
width: 1202px;/*之后要改回去1200*/
border: 1px solid red;
margin: 0 auto;
}
之后在li中使⽤float让他们位于同⼀⾏，给每个li的宽度设置为22%(原本应为⽗元素的1/4，即25%。但是需要留剩下的百分⽐给间距)。然后100%-22%*4=12%(即为三个间距的总宽度，每个间距宽度为4%);
.buy-one-buy li{
float: left;
width: 22%;
margin-right: 4%;
margin属性值可以为百分比height: 180px;
}
.buy-one-buy li:last-child{
margin-right: 0%;
}
.buy-one-buy img{
width: 100%;
height: 100%;
}
最后也能实现⼀样的效果（但在实际上也可以将float变成display:inline-block；但是需要消除默认间距。也⼀样能实现）
3.上诉两种⽅式如果页⾯⼀直固定为四栏的话，是可⾏的。但是如果维护的时候需要变成三栏五栏之类的就会需要修改⼀系列的css数据，并且平分的时候还不⼀定是整数。所以，最后我决定采⽤flex布局+css3去实现
依旧固定住最外层的宽度
.buy-one-buy{
width: 1202px;/*之后要改回去1200*/
border: 1px solid red;
margin: 0 auto;
}
然后在ul中（li列表的⽗元素）使⽤flex布局（这⾥⾃定义了⼀个属性n：为你需要分栏的数字，之后的li根据这个属性去动态计算宽度）.buy-one-buy ul{
display: flex;
justify-content: space-between;/*两端对齐，项⽬之间的间隔都相等*/
--n : 4;/*css⾃定义属性(--*)，⽤var(--*)使⽤⾃定义属性*/
}
将每个li设置宽度和⾼度（其中不需要将li转换成⾏内块元素，因为flex布局默认flex-direction属性的主轴⽅向为⽔平⽅向）(这⾥使⽤了css3中的calc函数)
.buy-one-buy li{
width: calc(calc((100/var(--n))*1%) - 20px);
height: 100px;
}
.buy-one-buy img{
width: 100%;
height: 100%;
}
最后，就能成功实现上述效果了！⽽且修改成不同的栏还⼗分⽅便！
flex布局教程：l
注意： css3中定义原⽣变量var浏览器兼容性不太好，如图：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论