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

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開発でボックスを中央に配置するいくつかの方法

推薦する

MySQL トランザクション分離レベルと MVCC の詳細な説明

目次トランザクション分離レベル同時トランザクション実行中に発生した問題SQL標準の4つの分離レベルM...

JDカルーセル効果を実現するための純粋なHTMLとCSS

JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CS...

Linux システムで Code Cloud にプロジェクトをアップロードする方法

Code Cloudで新しいプロジェクトtest1を作成します。 公開鍵を取得するには次のコマンドを...

Linux の文字端末でマウスを使って赤い四角形を移動する方法

すべてがファイルです! UNIX はすでにそれを言っています。エリック・レイモンドはこう言いました。...

Windows 7 64 ビットに最新バージョンの MySQL サーバーをインストールする方法のグラフィック チュートリアル

最近、MySQL データベースを勉強していて、設定ファイルを頻繁に変更したため、MySQL データベ...

Vueはドラッグ可能なツリー構造図を実装します

目次Vue 再帰コンポーネントドラッグイベント最近、Vue を使用して、ドラッグ可能なツリー構造図と...

Navicat PremiumはMySQLデータベースを操作します(SQL文を実行します)

1. Navicatの紹介1. Navicat とは何ですか? Navicat は強力な MySQ...

React Router で履歴リダイレクトを使用する方法

react-routerでは、コンポーネント内のジャンプは<Link>で使用できます。し...

Dockerプライベート倉庫の構築と利用の詳細説明

イメージは hub.docker.com に保存できますが、ネットワーク速度が比較的遅いです。内部環...

vue-routerのマッチングに基づいてパンくずリスト機能を実現する

この記事では主にvue-routerのmatchedをベースにしたbreadcrumb機能を紹介し、...

nginx で Vue プロジェクトをデプロイする方法

今日は nginx サーバーを使用するのですが、vue プロジェクトをサーバーにデプロイする必要もあ...

JS を使用した簡単な雪効果の例の詳細な説明

目次序文主な実装コードHTMLコードJSコード序文南の友達の多くは、雪をほとんど見たことがない、ある...

HTML テーブルレイアウト例の説明

HTML ドキュメント内の要素は次々に配置され、ブロックレベル要素の前後に改行が追加されるだけで、合...

カレンダー効果を実現するJavaScript

この記事では、カレンダー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...

JavaScript タイピングゲーム

この記事では、タイピングゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...