jQuery または CSS を使用して、可変コンテンツを持つ複数の要素の高さを揃えるにはどうすればよいですか?

jQuery と CSS を使用して要素の高さを均等にする

不確実なテキスト コンテンツを含む複数の要素があるシナリオで、視覚的な一貫性を保つために同じ高さを実現します。挑戦的になる可能性があります。この記事では、jQuery または CSS を使用してこの問題を解決する方法について説明します。

jQuery ソリューション

jQuery は、最も高い要素を見つけて他の要素の高さを設定する簡単なソリューションを提供します。それに応じて。その方法は次のとおりです。

$(document).ready(function() {
   var maxHeight = -1;

   $('.features').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.features').each(function() {
     $(this).height(maxHeight);
   });
 });

このコードは、「features」クラスを使用して各要素を反復処理し、maxHeight 変数を更新して最も高い要素を追跡します。次に、各要素の高さを maxHeight と一致するように設定して再度繰り返します。

CSS ソリューション

CSS では要素の高さを直接比較することはできませんが、次の要素の組み合わせはmin-height、max-height、および flexbox も同様の効果を実現できます:

.features {
  min-height: 100px;
  max-height: 500px;
  display: flex;
  flex-direction: column;
}

この CSS コード セット各 .features 要素の最小高さと最大高さを設定し、それらの制限を超えて縮小または拡大しないようにします。フレックスボックス レイアウトにより、要素が垂直方向に整列され、高さが効果的に均等になります。

jQuery または CSS を利用すると、テキストの内容に関係なく、要素の高さを簡単に確保でき、見た目の魅力と一貫性を維持できます。プレゼンテーション。

以上がjQuery または CSS を使用して、可変コンテンツを持つ複数の要素の高さを揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。