多种方式实现平均分栏布局（有间距）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平分行宽

原文：https://www.cnblogs.com/ahaMOMO/p/11521628.html