多种方式实现平均分栏布局（有间距）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%;
    height: 180px;
}
.buy-one-buy li:last-child{
    margin-right: 0%;
}
.buy-one-buy img{
    width: 100%;
    height: 100%;
}
```
最后也能实现一样的效果（但在实际上也可以将float变成display:inline-block;但是需要消除默认间距。也一样能实现）

多种方式实现平均分栏布局（有间距）div平分行宽

猜你喜欢