div の水平レイアウトを両側に揃える 3 つの方法

div の水平レイアウトを両側に揃える 3 つの方法

この記事では、主に、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 をよろしくお願いいたします。

<<:  HTML でのメタタグと使用法の詳細な説明

>>:  WeChatアプレット仮想リストの応用例

推薦する

Nginx で CDN サーバーを構築する方法の詳細な説明 (画像とテキスト)

Nginxのproxy_cacheを使用してキャッシュサーバーを構築する1: ngx_cache_...

MySQL よく使われる関数の詳細な概要

目次MySQL 共通関数1. 数値関数文字列関数3. 時間機能4. システム機能5. 集計関数MyS...

MySQLデータベースの名前を高速かつ安全に変更する方法(3種類)

目次MySQLデータベースの名前を変更する方法最初の方法: データベースの名前を変更することは非推奨...

MySQL 8.0.23 無料インストールバージョンの設定詳細チュートリアル

最初のステップは、MySQL 8.0.23の無料インストールバージョンをダウンロードすることです。 ...

Nginx転送マッチングルールの実装

1. 正規表現マッチング大文字と小文字を区別するマッチングの場合 ~ ~*は大文字と小文字を区別しな...

XHTML の IE 条件付きコメント

<br />条件付きコメントはIEシリーズ製品上でXHTMLコード処理を分離して行うこと...

docker を使用して Kong クラスター操作を構築する

docker コンテナの下に kong クラスターを構築するのは非常に簡単です。公式サイトの紹介も非...

CentOS7 での PostgreSQL 11 の詳細なインストールと設定のチュートリアル

1. 公式ウェブサイトアドレス公式サイトではインストールの参考手順が紹介されています。公式サイトを見...

カスタム変数を使用した MySQL クエリの最適化

目次並べ替えクエリの最適化変更されたばかりのデータ行を繰り返し取得しないようにする遅延ロードされた結...

【HTML要素】タグテキストの詳細説明

1. 基本的なテキスト要素を使用してコンテンツをマークアップするまず表示効果を見てみましょう:対応す...

.NETCore Dockerはコンテナ化とプライベートイメージリポジトリ管理を実装します

1. Dockerの紹介Docker は Linux オペレーティングシステムの一部の機能をベースに...

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

目次1. 開発モードとリリースモードに異なるパッケージエントリポイントを指定する2. 外部CDNリソ...

ubuntu18.04 での qt5.12.8 のインストールと環境設定に関する詳細なチュートリアル

環境システム: Ubuntu 18.04ソフトウェア: qt5.12.8 1. インストールパッケー...

MySQLデータベースの基礎知識と操作のまとめ

この記事では、例を使用して、MySQL データベースの基本的な知識と操作について説明します。ご参考ま...

TypeScript 環境を構築して VSCode にデプロイする詳細な手順

目次TypeScript環境の構築ステップ1: Taobaoミラーをダウンロードするステップ2: T...