多種方式實現平均分欄布局（有間距）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;但是需要消除默認間距。也一樣能實現）

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布局教程：https://www.runoob.com/w3cnote/flex-grammar.html

注意： css3中定義原生變量var瀏覽器兼容性不太好，如圖：