CSS マルチカラムレイアウトソリューション

<div class="parent">
    <div class="left">
        <p>左メニュー</p>
    </div>
    <div class="right">
        <li>右の項目1</li>
        <li>右の項目2</li>
        <li>右の項目3</li>
    </div>
</div>

html、本文、p、ul、li {
    マージン: 0;
    パディング: 0;
}
div.left{
    背景: #d2e3e3;
}
div.right {
    背景: #77DBDB;
}

。左 {
    フロート: 左;
    幅: 100ピクセル;
}
。右 {
    margin-left: 100px; // または overflow: hidden
}

。親 {
    表示: テーブル;
    幅: 100%;
    テーブルレイアウト: 固定; // https://blog.csdn.net/qq_36699230/article/details/80658742
    .左、.右{
        表示: テーブルセル;
    }
    。左 {
        幅: 100ピクセル;
    }
}

。親 {
    ディスプレイ: フレックス;
    。左 {
        width: 100px; // または flex: 0 0 100px;
    }
    。右 {
        フレックス: 1;
    }
}

。親 {
    表示: テーブル;
    幅: 100%;
    // table-layout: fixed; を設定するとセルの幅が等しくなるため、ここでは .left、.right は設定されません {
        表示: テーブルセル;
    }
    。左 {
        width: 0.1%; // 幅を最小値に設定します。table-layout: fixed が設定されていないため、幅はコンテンツによって決まります。white-space:nowrap;
    }
}

<div class="parent">
    <div class="column">
        <p>1</p>
    </div>
    <div class="column">
        <p>2</p>
    </div>
    <div class="column">
        <p>3</p>
    </div>
    <div class="column">
        <p>4</p>
    </div>
</div>

html、本文、div、p {
    マージン: 0;
    パディング: 0;
}
。親 {
    幅: 800ピクセル;
    境界線: 1px ソリッドコーラル;
    。カラム {
        高さ: 30px;
        背景：素焼き。
        ｐ {
            背景: #f0b979;
            高さ: 30px;
        }
    }
}

。親 {
    左マージン: -20px;
    オーバーフロー: 非表示;
    。カラム {
        フロート: 左;
        幅: 25%;
        左パディング: 20px;
        ボックスのサイズ: 境界線ボックス;
    }
} 

。親 {
    ディスプレイ: フレックス;
    。カラム {
        フレックス: 1;
        &+.列 {
            左マージン: 10px;
        }
    }
} 

。親 {
    ディスプレイ: フレックス;
}
.左、.右{
    フレックス: 1;
}