この記事では、主に、div の水平レイアウトの両側の配置を実装する 3 つの方法を紹介し、それらを共有します。 方法1親コンテナのdivはposition: relative;を使用し、子のdivはposition: absolute;を使用して配置します。マージンの問題に注意してください。 html <div class="div-container"> <div class="div1">1</div> <div class="div2">2</div> </div> CS /* 方法 1 */ .divコンテナ{ マージン: 10px 0; パディング: 10px; 幅: 400ピクセル; 境界線: 2px 実線 #ccc; 位置: 相対的; } .div1 { 幅: 100ピクセル; 高さ: 50px; 境界線: 2px 実線の赤; } .div2 { 幅: 100ピクセル; 高さ: 50px; 境界線: 2px 実線の赤; 位置: 絶対; /* マージン設定 */ 右: 10px; 上: 10px; } 方法2 推奨親コンテナ div は display:flex; justify-content:space-between; を使用します。 html <div class="div-container2"> <div class="div3">3</div> <div class="div4">4</div> </div> CS /* 方法 2 */ .div-コンテナ2 { マージン: 10px 0; パディング: 10px; 幅: 400ピクセル; 境界線: 2px 実線 #ccc; ディスプレイ: フレックス; コンテンツの両端揃え: スペースの間; } .div3 { 幅: 100ピクセル; 高さ: 50px; 境界線: 2px 実線の赤; } .div4 { 幅: 100ピクセル; 高さ: 50px; 境界線: 2px 実線の赤; } 方法3親コンテナ div は display: flex; を使用して水平方向の配置を実現し、子 div はスペースを埋めるために幅を設定します。 html <div class="div-container3"> <div class="div5">5</div> <div class="div7">プレースホルダー div</div> <div class="div6">6</div> </div> CS /* 方法 3 */ .div-コンテナ3 { マージン: 10px 0; パディング: 10px; 幅: 400ピクセル; 境界線: 2px 実線 #ccc; ディスプレイ: フレックス; コンテンツの両端揃え: スペースの間; } .div5 { 幅: 100ピクセル; 高さ: 50px; 境界線: 2px 実線の赤; } .div6 { 幅: 100ピクセル; 高さ: 50px; 境界線: 2px 実線の赤; } .div7 { 幅: calc(100% - 100px - 100px); 高さ: 50px; 境界線: 1px 実線 #ccc; } GitHub の完全なコードリンク https://github.com/gywgithub/exercise01/blob/master/div-flex/index.html これで、div レイアウトの水平方向の配置を実現する 3 つの方法についての記事は終了です。div レイアウトの水平方向の配置の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
Nginxのproxy_cacheを使用してキャッシュサーバーを構築する1: ngx_cache_...
目次MySQL 共通関数1. 数値関数文字列関数3. 時間機能4. システム機能5. 集計関数MyS...
目次MySQLデータベースの名前を変更する方法最初の方法: データベースの名前を変更することは非推奨...
最初のステップは、MySQL 8.0.23の無料インストールバージョンをダウンロードすることです。 ...
1. 正規表現マッチング大文字と小文字を区別するマッチングの場合 ~ ~*は大文字と小文字を区別しな...
<br />条件付きコメントはIEシリーズ製品上でXHTMLコード処理を分離して行うこと...
docker コンテナの下に kong クラスターを構築するのは非常に簡単です。公式サイトの紹介も非...
1. 公式ウェブサイトアドレス公式サイトではインストールの参考手順が紹介されています。公式サイトを見...
目次並べ替えクエリの最適化変更されたばかりのデータ行を繰り返し取得しないようにする遅延ロードされた結...
1. 基本的なテキスト要素を使用してコンテンツをマークアップするまず表示効果を見てみましょう:対応す...
1. Dockerの紹介Docker は Linux オペレーティングシステムの一部の機能をベースに...
目次1. 開発モードとリリースモードに異なるパッケージエントリポイントを指定する2. 外部CDNリソ...
環境システム: Ubuntu 18.04ソフトウェア: qt5.12.8 1. インストールパッケー...
この記事では、例を使用して、MySQL データベースの基本的な知識と操作について説明します。ご参考ま...
目次TypeScript環境の構築ステップ1: Taobaoミラーをダウンロードするステップ2: T...