CSSを使用して異なる高さのDivをスタックする方法?

CSS を使用して Bootstrap で異なる高さの Div を積み重ねる

指定されたレイアウトでは、Bootstrap のグリッド システムのため、これらの Div を垂直方向に整列させるのは依然として課題です。この問題は、プラグインに依存せずに CSS を通じて解決できます。

.menu-category {
  float: left;
  clear: both;
  padding: 0;
}

これらのスタイルを適用すると、カテゴリが横に並んでフロートし、clear プロパティを使用すると、各カテゴリの後にフロートが消去されます。これにより、最適なスタックが保証されます。

さまざまな画面サイズに合わせてレイアウトを微調整するには、Bootstrap のユーティリティ クラスを使用します。

.visible-sm, .visible-md, .visible-lg {
  display: block;
}

.visible-sm {
  clear: both;
}

この CSS により、カテゴリがより小さい画面にスタックされるようになります (例:スマートフォン)、大きな画面 (タブレットやデスクトップなど) では各カテゴリの後のフロートをクリアします。

以上がCSSを使用して異なる高さのDivをスタックする方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。