HTML で 2 列レイアウトを実装する方法の例 (左側は固定幅、右側は適応幅)

HTMLは2列レイアウトを実装し、左側は固定幅、右側は適応幅です。

実装1:

<スタイル>
    本文、html{パディング:0; マージン:0;}
    // CSS の配置に従って、フローティングまたは絶対配置を使用して、左側のブロック要素を通常のドキュメントフローから外し、右側のブロック要素と並べて配置できるようにします div:nth-of-type(1){
        float: left; //フローティングを使用// position: absolute; //絶対配置を使用// top: 0;
        // 左: 0;
        幅: 300ピクセル;
        高さ: 200px;
        背景: 赤;
    }
    // [ブロックレベル要素はデフォルトで親要素の幅に合わせて自動的に埋められ、1行を占めます]
    //現在: 右ブロック要素の幅 = 親要素の幅 div:nth-of-type(2){
        // margin-left を左のブロック要素の幅に設定します。
        左マージン: 300px;
        // 現在: 右ブロック要素の幅 = 親要素の幅 - margin-left
        高さ: 220px;
        背景: 青;
    }
</スタイル>
<html>
    <div>div1</div>
    <div>div2</div>
</html>

1) margin-leftを設定する前に

2) margin-leftを設定した後

実装2:

<スタイル>
    本文、html{パディング:0; マージン:0;}
    // CSS の配置に従って、フローティングまたは絶対配置を使用して、ブロック要素を通常のドキュメントフローの左側に配置します div:nth-of-type(1){
        float: left; //フローティングを使用// position: absolute; //絶対配置を使用// top: 0;
        // 左: 0;
        幅: 300ピクセル;
        高さ: 200px;
        背景: 赤;
    }
    // FC は通常の (通常の) ドキュメント フロー、書式設定コンテキスト、ページ内のレンダリング領域であり、一連のレンダリング仕様を持ちます。 BFC はブロックフォーマットコンテキストです。
    // BFCブロックレベルフォーマットコンテキストを使用して、分離された独立したコンテナを作成します div:nth-of-type(2){
        // オーバーフロー値を非表示に変更し、BFC をトリガーします
        オーバーフロー: 非表示;
        高さ: 220px;
        背景: 青;
    }
</スタイル>
<html>
    <div>div1</div>
    <div>div2</div>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: Vueプロジェクトが完了した後にプロジェクトを最適化する方法の例

>>: Web開発でボックスを中央に配置するいくつかの方法