両端の CSS レイアウトのサンプルコード (親の負のマージンを使用)

<スタイル>
        * {
            パディング: 0px;
            マージン: 0px;
            ボックスのサイズ: 境界線ボックス;
        }
        
        .max-box {
            最大幅: 1200px;
            マージン: 0px 自動;
        }
        
        。箱 {
            オーバーフロー: 非表示;
            幅: calc(100% + 20px);
            左マージン: -10px;
        }
        
        .インナー{
            高さ: 100px;
            境界線: 実線 1px 赤;
            フロート: 左;
            左マージン: 10px;
            幅: calc(((100% - 20px) - 10px * 3) / 4);
        }
        
        .max-box2 {
            最大幅: 1200px;
            マージン: 50px 自動;
            境界線: 実線 1px 赤;
            高さ: 200px;
        }
    </スタイル>

 <div class="max-box2">

    </div>
    <div class="max-box">
        <div class="box">
            <div class="inner">

            </div>
            <div class="inner">

            </div>
            <div class="inner">

            </div>
            <div class="inner">

            </div>
        </div>
    </div>

x = 10px; つまり、必要な間隔 y = 4 つまり、必要な行数 親: width: calc(100% + (x * 2));
子: 幅: calc(((100% - (x * 2)) - x * ( y - 1)) / y );