フロントエンドが習得すべき、複数列の等高レイアウトを実現するための CSS テクニック

1. はじめに

ページを作成しているときに、複数列のレイアウトに遭遇することがあります。各列の内容が異なる場合があり、各列の実際の高さが異なります。各列に背景色が付いていると、各列の下部がずれてしまい、ユーザーエクスペリエンスが悪くなります。

実際の問題の影響は次のとおりです。

2. 要件は次のとおりです

達成したい効果は、各列の実際の内容に関係なく、各列が確実に整列されるようにすることです。

3. 解決方法

HTML コードは次のとおりです。

<ul class="記事">
    <li class="js-equalheight">
      <p>
      顧客の利益を第一に考えるブローカー。
      顧客に専門的な取引ツールを提供する顧客の利益を最優先するブローカー。
      顧客に専門的な取引ツールを提供する顧客の利益を最優先するブローカー。
      顧客に専門的な取引ツールを提供する 顧客の利益を第一に考え、顧客に専門的な取引ツールを提供するブローカー</p>
    </li>
    <li class="js-equalheight">
      <p>顧客の利益を第一に考え、顧客に専門的な取引ツールを提供するブローカー。顧客の利益を第一に考え、顧客に専門的な取引ツールを提供するブローカー。</p>
    </li>
    <li class="js-equalheight">
      <p>顧客の利益を第一に考えるブローカー</p>
    </li>
  </ul>

（１）純粋なCSSソリューション

CSS コードは次のとおりです。

。記事{
  オーバーフロー: 非表示;
}

.記事>li{
  フロート: 左;
  マージン: 0 10px -9999px 0;
  パディング下部: 9999px;
  背景: #4577dc;
  幅: 200ピクセル;
  色: #fff;
}

.記事>li>p{
  パディング: 10px;
}

分析と説明：要素のpadding-bottomはできるだけ大きくし、padding-bottomによって拡大された領域を相殺するために、同じサイズの負のmargin-bottom値を設定する必要があります。正の値と負の値は互いに相殺し、ページレイアウトに影響を与えません。さらに、子要素の余分なカラーブロックの背景を非表示にするには、親要素に overflow: hidden を設定する必要があります。上記の CSS ソリューションには互換性の問題がないため、安心して使用できます。

（２）jsソリューション

js コードは次のとおりです。

jQuery(ドキュメント).ready(関数() {
  等しい高さ();
});

jQuery(ウィンドウ).resize(関数() {
  jQuery('.js-equalheight').css('height','auto');
  等しい高さ();
});

関数equalheight() {
  var heights = jQuery(".js-equalheight").map(function() {
    jQuery(this).height() を返します。
  }）。得る（）、

  maxHeight = Math.max.apply(null、高さ);

  jQuery(".js-equalheight").height(maxHeight);
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: Centos7 に MySQL 8.0.23 をインストールする手順 (初心者レベル)

>>: Reactはconetxtを通じてマルチコンポーネント値転送関数を実装します