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 中国語ソートルールの説明

推薦する

Dockerの基本的な手順

目次基本的な指示1. 現在のマシンのコンテナステータスを確認する2. イメージをダウンロードまたは取...

MySQL の冗長インデックスと重複インデックスの詳細な説明

MySQL では、同じ列に複数のインデックスを作成できます。意図的であるかどうかにかかわらず、MyS...

Vueプロジェクトの支払い機能コードの詳細な説明

1. Alipay方式: Alipay メソッド: Alipay をクリックして支払い、バックエンド...

MySQL のデフォルトのストレージ エンジンを変更する方法

mysql ストレージ エンジン: MySQL サーバーはモジュール スタイルを採用しており、特にス...

Windows Server 2016 に Oracle をインストールする方法

1. Oracle をインストールします。インターネット上には Oracle のインストール手順が多...

MySQL Limitクエリのパフォーマンスを向上させる方法

MySQL データベース操作では、一部のクエリを実行するときにデータベース エンジンが完全なテーブル...

IE8を閲覧するときにウェブサイトが自動的にIE7互換モードを使用するようにする

序文IE の将来のすべてのバージョンで Web ページの外観が一貫していることを保証するために、IE...

Vue Element Sortablejs を使用してテーブル列をドラッグする詳細な説明

1. css: ドラッグテーブル.css @charset "UTF-8"; ....

MySQL ルートパスワードをリセットする方法

目次1. ルートパスワードを忘れてしまい、データベースにアクセスできない: DBA にとって、スーパ...

mysql 5.7.18 winx64 無料インストール設定方法

1. ダウンロード2. 減圧3. パス環境変数を追加し、mysqlが配置されているbinディレクトリ...

mysqlのkey_lenの計算方法についての簡単な説明

MySQL の explain コマンドは SQL のパフォーマンスを分析できます。その 1 つが ...

MySQLのunion allとunionの違いを簡単に理解する

Union は、重複行を除外し、デフォルトのソートを実行する、データに対する結合操作です。Union...

MySQLはパスワードなしでログインする例を実装しています

具体的な方法:ステップ1: mysqlサービスを停止する /etc/init.d/mysqld を停...

Helloダイアログボックスのデザイン体験の共有

「どうしたの?」特定の種類のダイアログ ボックスに慣れていない限り、ダイアログ ボックスが表示された...

Linux で MySQL スケジュールタスクを実装する方法

前提: ストアド プロシージャは、毎日午後 10 時から午前 5 時まで 10 分ごとに実行されます...