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

この記事では、CSS で複数列の高さを揃えるレイアウトの関連情報と例を中心に紹介します。必要な方は参考にしていただければ幸いです。 。

最初は、複数の列の内容はサイズと高さが異なります。次に、表示するさまざまな背景を設定する必要があり、各列の高さは一貫している必要があります。この場合、複数列の同じ高さのレイアウトを使用する必要があります。

#最終的に必要な効果:

1. 実際の輪郭レイアウト

flex 技術ポイント: フレキシブル ボックス レイアウト フレックス、デフォルト値は等高レイアウトの機能です。

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

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

align-item この属性は、フレックス コンテナの現在の行のクロス軸 (垂直軸) の方向におけるフレックス項目の配置を定義します。デフォルト値は stretch で、要素はコンテナに合わせて引き伸ばされます。

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

css

.box {
  display: flex;
}
.left {
  width: 300px;
  background-color: grey;
}
.center {
  flex: 1;
  background: red;
}
.right {
  width: 500px;
  background: yellow;
}

CodePen の weiqinl ( @weiqinl ) による Pen の等高レイアウト フレックスを参照してください。

2。

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

display が

table-cell に設定されている場合、この要素は表のセルとして表示されます。タグ b6c5a531a458a2e790c1fd6421739d1c または b4d429308760b6c2d20d6300079ed38e を使用するのと同様です。

HTML 構造

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

CSS スタイル

.left {

  display: table-cell;

  width:30%;

  background-color: greenyellow;

}

.center {

  display: table-cell;

  width:30%;

  background-color: gray;

}

.right {

  display: table-cell;

  width:30%;

  background-color: yellowgreen;

}

3. 偽の等しい高さの列レイアウト、内側と下部の正と負の値外側のマージン

実装: 親コンテナのオーバーフロー属性を非表示に設定します。各列の下部パディングを比較的大きく設定し、同様の値の負のマージンを使用してこの高さを排除します。

• スケーラビリティに関係なく、高さが等しい効果を得るには、padding-bottom/margin-bottom を最も高い列と最も低い列の高さの差に設定するだけで済みます。

• スケーラビリティを考慮して、特定の列の高さが将来的に大幅に増減することを防ぐために、比較的大きな値を設定します。

技術的なポイント

• 背景はパディングを埋めますが、マージンは埋めません。マージンには折りたたみ性があり、負の値に設定できます。

• フロート:左。 float を使用すると、要素がドキュメント フローから取り出され、最も近いドキュメント フロー要素にフローティングされます。ここでの機能は、3 つの p 要素を並べて配置することです。

• overflow:hidden; オーバーフロー属性を hidden に設定すると、float の影響を排除するためにブロックレベルの書式設定コンテキスト (BFC) が生成されます。同時に、必要に応じて、コンテンツが塗りつぶしボックスに収まるようにインターセプトされ、コンテナーを超えた部分は非表示になります。

HTML 構造

<p class="box">

  <p class="left"></p>

  <p class="center"></p>

  <p class="right"></p>

</p>

CSS

.box {
  overflow: hidden;
}
.box > p{
  /**
  * padding-bottom 设置比较大的正值。
  * margin-bottom 设置绝对值大的负值。
  **/
  padding-bottom: 10000px;
  margin-bottom: -10000px;
  float:left;
  width:30%;
}
.left {
  background-color: greenyellow;
}
.center {
  background-color: gray;
}
.right {
  background-color: yellowgreen;
}

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

技術的なポイント: float は浮動小数点であり、各列の幅を設定します。親要素をインライン ブロック レベル要素に設定し、線形グラデーション イメージを使用して親要素の背景を設定し、等高効果を強調表示します。

CSS

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

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

<p class="box five-columns">
    <p class="col"></p>
    <p class="col"></p>
    <p class="col"></p>
    <p class="col"></p>
    <p class="col"></p>
</p>

css

/** 需要自己算出平均每列的宽度 */

.box {

  display: inline-block;

  background: linear-gradient(

    to right, 

    red, 

    red 20%,

    blue 20%,

    blue 40%,

    yellow 40%,

    yellow 60%,

    orange 60%,

    orange 80%,

    grey 80%,

    grey);

} 

.col {

  float: left; 

  width: 16%;

  padding: 2%;

}

概要: 上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、

CSS ビデオ チュートリアル をご覧ください。

関連する推奨事項:

php 公共福祉トレーニング ビデオ チュートリアル

CSS オンライン マニュアル

div/css グラフィック チュートリアル

以上がCSSを使用して複数列の等高レイアウトを設定する方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。