CSSで2カラムレイアウトを実現する3つの方法（コード）を紹介

この記事では、CSS を使用して 2 列のレイアウトを実装する 3 つの方法 (コード) を紹介します。必要な方は参考にしていただければ幸いです。

1. フローティング レイアウト

左の列の固定幅は左に移動し、右側のメイン コンテンツは margin-left を使用して左の列の幅をそのままにします。デフォルトの幅は自動です。残りの幅を埋めます。

<div class="one"></div>
 
<div class="two"></div>

        .one{
            float: left;
            width: 200px;
            height: 200px;
            background: darkcyan
        }
        .two{
            margin-left: 200px;
            height: 200px;
            background: salmon
        }

右側は固定幅で、左側も同様に固定列を右にフローティングし、margin-right を使用して幅を解放します。

    <div class="one"></div>
    <div class="two"></div>

rree

2. フローティング レイアウト + ネガティブ マージン (ダブル フライング ウィング レイアウトの 2 列バージョン)

        .one{
            float: right;
            width: 200px;
            height: 200px;
            background: darkcyan
        }
        .two{
            margin-right: 200px;
            height: 200px;
            background: salmon
        }

rree

3. 絶対配置

        <div class="aside"></div>
    <div class="main">
        <div class="content"></div>
    </div>

rree

C SS レイアウトシリーズ - 上下 2 列レイアウト_html/css_WEB-ITnose

CSS: 3 列レイアウト、両側固定、中央で適応_html/css_WEB-ITnose

css 複数列適応型レイアウト_html/ css_WEB-IT鼻

以上がCSSで2カラムレイアウトを実現する3つの方法（コード）を紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。