画像幅適応アラインメント+の移動端の両端

アダプティブ4つのグリッド

そのようなAの設計案は、左及び白ピッチ4PXの右側は、10pxの中間間隔は、各行が同じ幅の二つのグラフである（すなわち、幅二分ピッチを除去した後）

そこの方法であり、設計者は、全てのパーセンテージサイズに特定の寸法を議論します。。このレイアウトは非常に良い書き込みではない主な理由は、その適応の幅が、その後の困難があるだろうでした、幅、割合（50％）と実際のサイズ（4PX 10pxの）混合で、あります。

以下は、書き込みにまともな方法です。

ピクチャ単位フロートは、幅が、50％に設定されている奇数部は、10pxのマージンから右に設けられ、均一ユニットが配置マージン右-10pxあります。親要素が左4PXパディング、右14pxのパディングに提供される画像の実際の幅の50％がユニットニーズの幅に合うように、親要素のパディング値は、すべてのピッチの正確和です。負マージン（-10px）ユニット及び親要素右パディング（14px）及び（要素は、それが覆う左右のエレメントに移動するであろうため、マージン実際陰性）4PX距離なる権利

我々はいくつかの簡単なフォールトトレラント、垂直ピクチャ単位、割合としての映像ユニットセットパディングトップを中心に絵、デザインの割合を行う必要があるので、実際に学生の動作は、チャートには、非常に標準ではないかもしれないん写真のアスペクト比ドラフト。絵は多少の誤差がタイポグラフィの全体的なレイアウトには影響しませんにもかかわらず、原則を中心にベースの垂直トップ割合は、親要素の割合が基本要素そのもので翻訳しています。

次のように実際のコードは

<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%;
    }
 }

アダプティブグリッド宮殿

半分の脳を持つ4つ以上のグリッド、および同様な宮殿ギンガム事務所の経験で非常に簡単に書き込むこともあります

コードは以下の通りです

  <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%;
    }
}

デモ

（上の応答モードを使用してください）インク瞳漫画H5のソースを表示の公式ウェブサイトへようこそインク瞳コミック