CSSを使用して複数列の等高レイアウトを設定する方法の例-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2018-10-09 17:12:31

転載

1852 人が閲覧しました

この記事では、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 に設定されている場合、この要素は表のセルとして表示されます。タグ または を使用するのと同様です。

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 ビデオチュートリアルをご覧ください。