CSS を使用して、左側に固定幅、右側に適応幅を持つ 2 列レイアウトを実装する複数の方法

CSS を使用して、左側に固定幅、右側に適応幅を持つ 2 列レイアウトを実装する 7 つの方法。コードは次のとおりです。

1. calc を使用して幅を計算する CSS コード:

.box>div{高さ: 100%;}
#box1>div{float: 左;}
.left1{幅: 100px;背景: 黄色;}
.right1{背景: #09c;幅:calc(100% - 100px);}

DOM構造:

<div class="box" id="box1">
    <div class="left1">左の幅を固定</div>
    <div class="right1">右側に適応</div>
</div>

2. float と margin を使用して CSS コードを実装します。

.box{オーバーフロー: 非表示;高さ: 100px;マージン: 10px 0;}
.box>div{高さ: 100%;}
.left2{float: left;background: yellow;width: 100px;}
.right2{背景: #09c;左余白: 100px;}

DOM構造:

<div class="box" id="box2">
    <div class="left2">左の幅を固定</div>
    <div class="right2">右側アダプティブ</div>
</div>

3. float と overflow を使用して CSS コードを実装します。

.box{オーバーフロー: 非表示;高さ: 100px;マージン: 10px 0;}
.box>div{高さ: 100%;}
.left3{float: left;background: yellow;width: 100px;}
.right3{背景: #09c;オーバーフロー: 非表示;}

DOM構造:

<div class="box" id="box3">
    <div class="left3">左の幅を固定</div>
    <div class="right3">右側アダプティブ</div>
</div>

4. marginを指定したposition:absoluteを使用して

CSSコード:

.box{オーバーフロー: 非表示;高さ: 100px;マージン: 10px 0;}
.box>div{高さ: 100%;}
#box4{位置: 相対;}
.left4{位置: 絶対;左: 0;上: 0;幅: 100px;背景: 黄色;}
.right4{マージン左:100px;背景: #09c;}

DOM構造:

<div class="box" id="box4">
    <div class="left4">左の幅を固定</div>
    <div class="right4">右側アダプティブ</div>
</div>

5. position:absoluteを使用して

CSSコード:

.box{オーバーフロー: 非表示;高さ: 100px;マージン: 10px 0;}
.box>div{高さ: 100%;}
#box5{位置: 相対;}
.left5{位置: 絶対;左: 0;上: 0;幅: 100px;背景: 黄色;}
.right5{位置: 絶対;左: 100px;上: 0;右: 0;幅: 100%;背景: #09c;}

DOM構造:

<div class="box" id="box5">
    <div class="left5">左の幅を固定</div>
    <div class="right5">右側アダプティブ</div>
</div>

6. display: flexを使用して達成する

CSSコード:

.box{オーバーフロー: 非表示;高さ: 100px;マージン: 10px 0;}
.box>div{高さ: 100%;}
#box6{display: flex;display: -webkit-flex;}
.left6{flex:0 1 100px;背景:黄色;}
.right6{flex:1;背景: #09c;}

DOM構造:

<div class="box" id="box6">
    <div class="left6">左の幅を固定</div>
    <div class="right6">右側アダプティブ</div>
</div>

7. display: table を使用して CSS コードを実装します。

.box{オーバーフロー: 非表示;高さ: 100px;マージン: 10px 0;}
.box>div{高さ: 100%;}
#box7{表示: テーブル;幅: 100%;}
#box7>div{display: テーブルセル;}
.left7{幅: 100px;背景: 黄色;}
.right7{背景: #09c;}

DOM構造:

<div class="box" id="box7">
    <div class="left7">左の幅を固定</div>
    <div class="right7">右側アダプティブ</div>
</div>

CSS を使用して、左側に固定幅、右側に適応幅の 2 列レイアウトを実現する 7 つの方法についての記事はこれで終わりです。CSS 2 列レイアウトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML ドラッグアンドドロップ機能の実装コード

>>: HTML リストボックス、テキストフィールド、ファイルフィールドのサンプルコード