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プロジェクトが完了した後にプロジェクトを最適化する方法の例
推薦する
よく使われるシングルページアプリケーションウェブサイト共有
CSS3お願いしますこのウェブサイトを自分で見て、パラメータを変更し、CSS3効果をオン/オフにする...
MySQL の 3 つの浮動小数点型 (float、double、decimal) の違いと概要について簡単に説明します。
各浮動小数点型のストレージ サイズと範囲は、次の表に示されています。タイプサイズ範囲（符号付き）範囲...
MySQL SQL文の特殊処理文のまとめ（必読）
1.テーブル全体を更新します。データ行の列の値が空の場合は、別の列フィールドの値と同じにします。 ...
CSS3マスクレイヤーのくり抜き効果を実現するさまざまな方法
この記事では、マスク レイヤーの中空化を実現する 4 つの方法を紹介します。みんなと共有し、自分用の...
ova ファイルを VMware にインポートする際の落とし穴の概要
問題の原因ご存知のとおり、すべてのネットワーク動作は対応するネットワークトラフィックを生成し、すべて...
Linuxシステムにおけるキー認証に基づくSSHサービスのプロセス
ご存知のとおり、SSH は現在、リモート ログイン セッションやその他のネットワーク サービスにセキ...
JavaScript で二分探索木を実装する
JavaScriptでの検索二分木実装は参考までに。具体的な内容は以下のとおりです。バイナリ検索木 ...
Vue+Element UIはドロップダウンメニューのカプセル化を実現します
この記事の例では、ドロップダウンメニューのカプセル化を実装するためのVue + Element UI...
CSSを使用して複数の画像を中央に水平に表示する方法
まず実装手順について説明します。最終結果 2. コードの実装HTML部分 <div class...
Web フロントエンドのパフォーマンス最適化の詳細説明: リソースのマージと圧縮
2つの目的のためのリソースの結合と圧縮httpリクエストの数を減らす要求されたリソースのサイズを縮小...
優れた登録プロセスの手順
ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...
Vueのwatch、computed、methodsの違いのまとめ
目次1 はじめに2 基本的な使い方2.1 方法2.2 計算プロパティ2.3 リスナーを見る3 3つの...
Linuxでのcrontabの使い方と注意点の詳しい説明
Crontab は定期的な実行を設定するために使用されるコマンドです。そのデーモン プロセスは cr...
Vue.jsはシンプルな折りたたみパネルを実装します
この記事では、Vue.jsの具体的なコードを共有して、シンプルな折りたたみパネルを実装する例を紹介し...
フックを使用して React コンポーネントを書くときに注意すべき 5 つの点
目次01. レンダリングが不要な場合はuseStateを使用する02. リンクの代わりにrouter...