1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル]css use negative margin to achieve average layout of example.

2022-02-02 21:57:32

均等に配置する場合は、一般的にネガティブマージン方式を使用します。下の画像は、平均的なレイアウトの場合です。

通常この場合、親要素と子要素の間にdivを1層追加し、このdivに子要素間の距離の値で負のmargin-rightを設定します。
例えば、子要素の幅を100px、子要素を3つ作り、それぞれの子要素のmargin-rightを50pxにすると、親要素の幅は100x3+50x2=400pxになります。

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

//CSS
.son1,.son2,son3{
    margin-right:50px;
    width:100px;
}
.father{
    width:400px;
}
.middle{
    margin-right:-50px;
}


ミドルレイヤーのmargin-right:-50pxは、右に50px伸びるのと同じで、son3要素が他の要素と一直線上に並ぶように余裕を持たせています。

この記事では、例の平均的なレイアウトを実現するために負のマージンを使用してCSSについて紹介されていますが、より関連するCSS負のマージン平均レイアウトの内容は、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来よりスクリプトハウスをサポートして願っています!。