CSS を使用して複数列の等高レイアウトを設定する方法の例

最初は、複数の列のコンテンツのサイズと高さが異なります。ここで、表示する背景を異なるものに設定し、各列の高さを一定にする必要があります。この場合、複数列の等高レイアウトを使用する必要があります。

最終的に望ましい効果:

1. 真の等高レイアウト

flex の技術ポイント: flex の柔軟なボックス レイアウト、デフォルト値は組み込みの等高レイアウト機能です。

フレックス レイアウトを定義する場合、いくつかのデフォルト値があります。

flex-directionプロパティは、主軸の方向を定義します。デフォルト値はrowで、通常は水平に表示されます。フレックス コンテナーの主軸は、テキストの方向と同じになるように定義されます。 メインの開始とメインの終了はコンテンツと同じ方向になります。

align-itemプロパティは、フレックス コンテナーの現在の行の交差軸 (垂直軸) 方向にフレックス アイテムをどのように配置するかを定義します。デフォルト値はstretchで、要素はコンテナーに合わせて引き伸ばされます。

<div class="box">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

CS

。箱 {
  ディスプレイ: フレックス;
}
。左 {
  幅: 300ピクセル;
  背景色: グレー;
}
。中心 {
  フレックス: 1;
  背景: 赤;
}
。右 {
  幅: 500ピクセル;
  背景: 黄色;
}

CodePen の weiqinl ( @weiqinl ) による equal-hight-layout-flex の Pen をご覧ください。

2. 真の等高レイアウト

table-cell 技術的なポイント: テーブルレイアウトは、当然、高さが均等であるという特徴があります。

display がtable-cellに設定されている場合、この要素はテーブル セルとして表示されます。 <td>または<th>タグを使用するのと同様です。

HTML構造

<div class="box">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

CSS スタイル

。左 {

  表示: テーブルセル;

  幅:30%;

  背景色: 緑黄色;

}

。中心 {

  表示: テーブルセル;

  幅:30%;

  背景色: グレー;

}

。右 {

  表示: テーブルセル;

  幅:30%;

  背景色: 黄緑;

}

3. 偽の等高列レイアウトにおける下内側余白と下外側余白の正負の値

実装: 親コンテナのオーバーフロー プロパティを hidden に設定します。各列の下部に大きなパディングを与え、同様の値の負のマージンを使用してこの高さをオフセットします。

• スケーラビリティを考慮せずに、同じ高さの効果を実現するには、padding-bottom/margin-bottom を最上位の列と最下位の列の高さの差に設定するだけで済みます。
• スケーラビリティを考慮し、将来的に列の高さが大幅に増加または減少するのを防ぐために、比較的大きな値を設定します。

技術的なポイント

• 背景はパディングを埋めますが、余白は埋めません。マージンは折りたたみ可能で、負の値に設定できます。
• フロート:左。 float を使用すると、要素はドキュメント フローから取り出され、ドキュメント フロー内の最も近い要素にフロートされます。これは 3 つの div 要素を並べて配置します。
• overflow:hidden; overflow プロパティを hidden に設定し、ブロック フォーマット コンテキスト (BFC) を生成して float の影響を排除します。同時に、必要に応じて、コンテンツはパディング ボックスに収まるようにクリップされ、コンテナーを超える部分が非表示になります。

HTML構造

<div class="box">

  <div class="left"></div>

  <div class="center"></div>

  <div class="right"></div>

</div>

CS

。箱 {
  オーバーフロー: 非表示;
}
.box > div{
  /**
  * padding-bottom をより大きな正の値に設定します。
  * margin-bottom を絶対値の大きい負の値に設定します。
  **/
  パディング下部: 10000px;
  下マージン: -10000px;
  フロート:左;
  幅:30%;
}
。左 {
  背景色: 緑黄色;
}
。中心 {
  背景色: グレー;
}
。右 {
  背景色: 黄緑;
}

4. 偽の等高レイアウト、背景の視覚効果

技術的なポイント: float を float し、各列の幅を設定します。親要素をインラインブロックレベル要素に設定し、線形グラデーション画像を使用して親要素の背景を設定し、同じ高さの効果を強調します。

CSS のlinear-gradient関数は、2 色以上の線形グラデーションを表す画像を作成するために使用されます。

display: inline-block 、インライン ブロックレベル要素に設定します。

<div class="box 5-columns">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

CS

/** 各列の平均幅を自分で計算する必要があります*/

。箱 {

  表示: インラインブロック;

  背景: 線形グラデーション(

    右へ、 

    赤、 

    赤 20%、

    青 20%、

    青 40%、

    黄色 40%、

    黄色 60%、

    オレンジ 60%、

    オレンジ 80%、

    グレー 80%、

    グレー）;

} 

.col {

  フロート: 左; 

  幅: 16%;

  パディング: 2%;

}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。