4 列のレスポンシブ Web サイトを作成しています。画面が狭くなったら4列を2列にして欲しい。ただし、列 2 が列 1 よりも短い場合、このアプローチは失敗します。列 3 が 2 より下にあり、列 1 の下に列 4 が表示される前に大きなギャップがあります。CSS を使用してこの大きなギャップを持たないようにする方法はありますか? HTML 要素を追加したくありませんが、必要に応じて追加できます。
質問する
1828 次
1 に答える
2
clear: left3番目の列（を使用.fourcolumn:nth-child(3)）または一般的な奇数列（を使用.fourcolumn:nth-child(2n+1)）に追加するだけです。
デモ
[また、狭い画面から始めて、広い画面に移動し（モバイルファーストアプローチ）、ベースクエリではなくベースメディアクエリを使用することをお勧めしますempx（ユーザーがズームしたときにレイアウトが壊れないようにするため）]
于 2012-09-23T05:49:48.827 に答える