CSS で平均レイアウトを実現するために負のマージンを使用する例

均等に分散されたレイアウトの場合、通常はネガティブ マージン方式を使用します。次の図は平均的なレイアウトを示しています。

この場合、通常は親要素と子要素の間に div を追加し、この div に負の margin-right を設定します。値は 2 つの子要素間の距離になります。
たとえば、各子要素の幅を 100 ピクセルに設定し、合計 3 つの子要素があり、各子要素に 50 ピクセルの margin-right を指定すると、親要素の幅は 100x3+50x2=400 ピクセルになります。上記のコード:

//HTML
<div class="父">
    <div class="middle">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>
</div>

//CSS
.息子1、.息子2、息子3{
    右マージン:50px;
    幅:100ピクセル;
}
。父親{
    幅:400ピクセル;
}
。真ん中{
    右マージン:-50px;
}

中間層の margin-right:-50px は、50px 右に「拡張」することと同等であり、son3 要素が他の要素と同じ行に配置されるスペースが確保されます。

これで、CSS を使用して負のマージンで平均レイアウトを実現する例に関するこの記事は終了です。負のマージンを使用した CSS 平均レイアウトの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。