最初は、複数の列のコンテンツのサイズと高さが異なります。ここで、表示する背景を異なるものに設定し、各列の高さを一定にする必要があります。この場合、複数列の等高レイアウトを使用する必要があります。 最終的に望ましい効果: 1. 真の等高レイアウト flex の技術ポイント: flex の柔軟なボックス レイアウト、デフォルト値は組み込みの等高レイアウト機能です。 フレックス レイアウトを定義する場合、いくつかのデフォルト値があります。 <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 が HTML構造 <div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> CSS スタイル 。左 { 表示: テーブルセル; 幅:30%; 背景色: 緑黄色; } 。中心 { 表示: テーブルセル; 幅:30%; 背景色: グレー; } 。右 { 表示: テーブルセル; 幅:30%; 背景色: 黄緑; } 3. 偽の等高列レイアウトにおける下内側余白と下外側余白の正負の値 実装: 親コンテナのオーバーフロー プロパティを hidden に設定します。各列の下部に大きなパディングを与え、同様の値の負のマージンを使用してこの高さをオフセットします。
技術的なポイント
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 の <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 を応援していただければ幸いです。 |
1. モジュールをインポートし、検証状態を定義する PIL から Image、ImageDraw、...
Vue での v-on:clock の使用現在、vue.js フレームワークを学習しています。後で参...
以前 HTML を解析したことがあるので、今日は Vue ドラッグ アンド ドロップを使用して、Ku...
Ubuntu 18のインストール中に、USBディスクからUbuntuのインストールを開始すると、mm...
導入RANGE パーティション分割は、指定された連続した間隔範囲に基づいています。RANGE の初期...
ウィンドウの中央にブロック要素の位置を設定する方法ブロック要素をウィンドウの中央に配置する上記の方法...
Linux 仮想マシン: VMware + Ubuntu 16.04.4 Windows ネイティブ...
1. 問題時々Mysqlにログインしてパスワードを入力すると、この状況が発生しますmysql -u...
1. AデータベースとBデータベースの同期ステータスを確認する次のコマンドを入力すると多くの情報が表...
1. はじめに:友人はシステム知識を学びたいと考えており、Apple のラップトップを使用していまし...
目次概要CommonJS 仕様Node の CommonJS 仕様の実装モジュールのエクスポートとイ...
これまでにも Docker 環境でいくつかのプロジェクトを実行したことはありますが、まだイメージをよ...
ネイティブJavaScriptでスキニングを実装するための具体的なコードは参考までに。具体的な内容は...
取引トランザクションはビジネス ロジックの基本単位です。各トランザクションは一連の SQL ステート...
序文MySQL インデックスで最も重要なデータ構造は B+ ツリーなので、まずは B+ ツリーの原理...