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>

/* 方法 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>

/* 方法 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>

/* 方法 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アプレット仮想リストの応用例