移動端兩端對齊 + 圖片寬度自適應

自適應四宮格

有這樣一張設計稿，左右兩邊白色間距爲4px，中間間距爲10px，每一行的兩張圖是等寬的（即平分去掉間距後的寬度）

有一種方法是和設計師商量，把全部的具體尺寸改成百分比尺寸。。這個佈局不太好寫的主要緣由是，在寬度上，百分比（50%）與實際尺寸（4px 10px）混雜，因此作到寬度自適應的話會有困難。

下面是正經的一種寫法：

圖片單元float，寬度設置爲50%，奇數單元設置margin-right爲10px, 偶數單元設置margin-right爲-10px。父元素設置左padding爲4px，右padding爲14px，父元素的padding值正好是全部間距的總和，因此它實際寬度的50%是正好符合需求的圖片單元寬度。偶數單元的負margin（-10px）和父元素右padding（14px）會中和成4px的右邊距（其實是由於元素負margin會使其右邊的元素向左移動並被其覆蓋）

運營的同窗在實際操做中，作的圖可能不會很標準，因此咱們須要作一些簡單地容錯，便是圖片垂直居中在圖片單元內，圖片單元設置padding-top爲一個百分比，這個百分比爲設計稿中圖片的寬高比。這樣即便圖片有些偏差也不會影響整體的排版佈局，垂直居中的原理是 top 百分比的基數是父元素 translate百分比的基數是元素自己。

實際代碼以下

<dl class="four-item-list">
    <dd class="item">
        <div class="img-bar"><img src="" alt="" class="img"></div>
    </dd>
   <dd class="item">
        <div class="img-bar"><img src="" alt="" class="img"></div>
    </dd>
    <dd class="item">
        <div class="img-bar"><img src="" alt="" class="img"></div>
    </dd>
    <dd class="item">
        <div class="img-bar"><img src="" alt="" class="img"></div>
    </dd>
</dl>

.four-item-list{
    overflow: hidden;
    padding: 4px 14px 0 4px;
    .item{
      width: 50%;
      margin: 0 10px 18px 0;
      float: left;
      &:nth-child(even){
        margin-right: -10px;
      }
    }
    .img-bar{
      padding-top: 71%;
      position: relative;
      border-radius: 4px;
      overflow: hidden;
    }
    .img{
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
    }
 }

自適應六宮格

有了上面四宮格的經驗，相似的這種六宮格佈局動動腦子也很容易寫

代碼以下

<dl class="six-item-list">
    <dd class="item">
        <div class="img-bar"><img src="" alt="" class="img"></div>
    </dd>
    <dd class="item">
        <div class="img-bar"><img src="" alt="" class="img"></div>
    </dd>
    <dd class="item">
        <div class="img-bar"><img src="" alt="" class="img"></div>
    </dd>
    <dd class="item">
        <div class="img-bar"><img src="" alt="" class="img"></div>
    </dd>
    <dd class="item">
        <div class="img-bar"><img src="" alt="" class="img"></div>
    </dd>
    <dd class="item">
        <div class="img-bar"><img src="" alt="" class="img"></div>
    </dd>
  </dl>

.six-item-list{
    overflow: hidden;
    padding: 4px 14px 0 4px;
    .item{
      width: 33.3%;
      margin: 0 5px 18px 0;
      float: left;
      &:nth-child(3n+0){
        margin-right: -10px;
      }
    }
    .img-bar{
      padding-top: 100%;
      position: relative;
      border-radius: 4px;
      overflow: hidden;
    }
    .img{
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
    }
}

demo

歡迎你們到墨瞳漫畫h5官網查看源碼（請用響應式模式打開） 墨瞳漫畫