CSS で平均レイアウトを実現するためにネガティブマージンテクノロジーを使用する方法

通常、IE ブラウザでの CSS の互換性の問題を解決するために、フロートレイアウトが使用されます。たとえば、Taobao はフロートレイアウトを使用して実装します。 Taobao ページには、以下に示すようなレイアウトが表示されます。

このように均等に分布した画像のレイアウトを平均レイアウトと呼びます。では、このレイアウトはどのようにして実現されるのでしょうか? 生徒の中には、これは難しくないと考える人もいるかもしれません。親要素 div の幅を子要素の幅の合計と等しくなるように設定するだけです。本当にそんなに簡単なのでしょうか？試してみましょう。

テスト

各子要素の幅を 100 px に設定し、合計 3 つの子要素があり、各子要素に 50 px の margin-right を指定すると、親要素の幅は 100x3+50x2=400 px になります。スタイルをいくつか設定してみましょう。 html および css コードは次のとおりです。

//HTML
<div class="父クリアフィックス">
   <div class="son"></div>
   <div class="son"></div>
   <div class="son"></div>
</div>

//CSS
* {
  マージン: 0;
  パディング: 0;
  ボックスのサイズ: 境界線ボックス;
}

.clearfix::after {
  コンテンツ： '';
  表示: ブロック;
  クリア: 両方;
}

。父親 {
  幅: 400ピクセル;
  高さ: 100px;
  マージン: 10px;
  背景色: #d5a4cf;
  境界線: 1px 黒一色;
}

.息子{
  境界線: 1px 黒一色;
  背景色: #fff1ac;
  フロート: 左;
  右マージン: 50px;
  幅: 100ピクセル;
  高さ: 100px;
}

効果は以下のとおりです

最後の子要素が押し下げられていることがわかりました。なぜでしょうか?なぜかと聞かないでください。それが CSS だからです。では、この問題をどう解決したらいいのでしょうか？親要素の 1px の境界線が影響しているという学生もいました。アウトラインに変更してみましょう。

それでもまだ機能しないことがわかりました。どうすればよいでしょうか?次に「ネガティブマージン」という手法を紹介します。親要素と子要素の間に中間レイヤーを追加し、この div の margin-right を -50px に設定します。もう一度試してみましょう。

//HTML
<div class="父クリアフィックス">
  <div class="middle clearfix">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
  </div>
</div>

//CSS
* {
  マージン: 0;
  パディング: 0;
  ボックスのサイズ: 境界線ボックス;
}

.clearfix::after {
  コンテンツ： '';
  表示: ブロック;
  クリア: 両方;
}

。父親 {
  幅: 400ピクセル;
  高さ: 100px;
  マージン: 10px;
  背景色: #d5a4cf;
  アウトライン: 1px 黒
}

.息子{
  境界線: 1px 黒一色;
  背景色: #fff1ac;
  フロート: 左;
  右マージン: 50px;
  幅: 100ピクセル;
  高さ: 100px;
}

。真ん中 {
  右マージン: -50px;
}

このとき、中央の div が右マージンを「拡張」して 3 つの子要素を「ラップ」し、平均的なレイアウトを実現していることがわかりました。