浮動要素の高さが同じでない場合、浮動要素間のギャップを修正する方法を常に考えていました。
ここで、私が取り除きたい とFeatured
の間のギャップを見ることができます。(ボックスがより引き伸ばされ、テキストがより少ない行に広がるため
Notice
、画面の解像度が大きい場合はさらに大きくなります)Featured
これはフローティング左要素の順序であることに注意することが重要かもしれません:
- 特徴
- ニュース
- 見出し
- 知らせ
小さい画面のレイアウト (これはまったく問題ないように見えます。画面の解像度に基づく一貫性のないレイアウトを使用して、次の説明で何を意味するかをお見せしたかっただけです)
デザインに一貫性がある場合は、何らかのグリッド システムを実装してもかまいませんが、私の場合は画面解像度に基づいたスタイルを使用しているため、特定の画面解像度でボックスの幅が 50% から 100% に変化します (固定値はありません)。ここで使用)。
流動的なガードが正しい方法かもしれないと思っていましたが、それらをチェックした後 (以前は使用したことがありません) かなり静的に感じられ、この問題を解決できるかどうかはわかりません。
編集: 問題のサンプル: http://jsfiddle.net/UfVrH/ . AD の固定高さの値は、div を拡張するコンテンツをシミュレートするためだけにあることに注意してください。