ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS Clearfixを使用してブートストラップ行の不均一な高さのDivを垂直方向に揃える方法

CSS Clearfixを使用してブートストラップ行の不均一な高さのDivを垂直方向に揃える方法

Linda Hamilton
Linda Hamiltonオリジナル
2024-11-15 22:55:04738ブラウズ

How to Vertically Align Uneven Height Divs in Bootstrap Rows Using CSS Clearfixes?

CSS Clearfixes を使用したブートストラップでの不均一な高さの Div の垂直方向の配置

目的は、Bootstrap の行内で高さの異なる div を垂直方向に配置することです。 Masonry などの外部プラグインを使用します。 CSS ソリューションは次のとおりです。

提供された HTML 構造では、各カテゴリはクラス「menu-category」の div によって表されます。これらの div は、各カテゴリ内の項目が異なるため、高さが異なります。望ましいスタッキングを実現するには、Bootstrap の可視性クラスを利用できます。

具体的には、可視性修飾子を備えた「clearfix」クラスを追加して、div レイアウト内のフロートを選択的にクリアできます。たとえば、中および大の画面サイズでのみフロートをクリアしたい場合は、次のコードを使用できます:

<div class="clearfix visible-md visible-lg"></div>

同様に、小さい画面サイズでのみフロートをクリアするには、次のコードを使用します:

<div class="clearfix visible-sm"></div>

これらのクリア div を HTML 構造内の適切な場所に追加すると、フローティング div が次の行に折り返され、強制的にスタックされるのを防ぐことができます。

例:

このアプローチでは、div の高さがコンテンツに基づいて動的に調整され、行コンテナー内にきちんとスタックされるようになります。

以上がCSS Clearfixを使用してブートストラップ行の不均一な高さのDivを垂直方向に揃える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。