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

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 を応援していただければ幸いです。

<<:  HTMLノードの追加と削除の簡単な例

>>:  Mysql 中国語ソートルールの説明

推薦する

Django は Pillow を使用して検証コード機能を簡単に設定します (Python)

1. モジュールをインポートし、検証状態を定義する PIL から Image、ImageDraw、...

Vueのv-onパラメータの問題についてお話しましょう

Vue での v-on:clock の使用現在、vue.js フレームワークを学習しています。後で参...

v-html レンダリング コンポーネントの問題

以前 HTML を解析したことがあるので、今日は Vue ドラッグ アンド ドロップを使用して、Ku...

win10にUbuntu18デュアルシステムをインストールするとmmx64.efiが見つからないという問題が発生する

Ubuntu 18のインストール中に、USBディスクからUbuntuのインストールを開始すると、mm...

MySQL 5.5 で範囲パーティションを追加および削除する例

導入RANGE パーティション分割は、指定された連続した間隔範囲に基づいています。RANGE の初期...

ウィンドウの中央にブロック要素の位置を設定する方法

ウィンドウの中央にブロック要素の位置を設定する方法ブロック要素をウィンドウの中央に配置する上記の方法...

mysql を解決: エラー 1045 (28000): ユーザー 'root'@'localhost' のアクセスが拒否されました (パスワードの使用: NO/YES)

1. 問題時々Mysqlにログインしてパスワードを入力すると、この状況が発生しますmysql -u...

MySQL マスタースレーブステータスチェックの実装

1. AデータベースとBデータベースの同期ステータスを確認する次のコマンドを入力すると多くの情報が表...

VMWare12 グラフィックチュートリアルで Apple Mac OS X をインストールする

1. はじめに:友人はシステム知識を学びたいと考えており、Apple のラップトップを使用していまし...

Nodejs モジュール システムのソースコード分析

目次概要CommonJS 仕様Node の CommonJS 仕様の実装モジュールのエクスポートとイ...

Docker で php-nginx-alpine イメージをゼロから構築する方法

これまでにも Docker 環境でいくつかのプロジェクトを実行したことはありますが、まだイメージをよ...

スキニングを実現するネイティブJavaScript

ネイティブJavaScriptでスキニングを実装するための具体的なコードは参考までに。具体的な内容は...

MySQL トランザクション分析

取引トランザクションはビジネス ロジックの基本単位です。各トランザクションは一連の SQL ステート...

初心者向けMySQLインデックス

序文MySQL インデックスで最も重要なデータ構造は B+ ツリーなので、まずは B+ ツリーの原理...