1

浮動要素の高さが同じでない場合、浮動要素間のギャップを修正する方法を常に考えていました。

ここで、私が取り除きたい とFeaturedの間のギャップを見ることができます。(ボックスがより引き伸ばされ、テキストがより少ない行に広がるため Notice、画面の解像度が大きい場合はさらに大きくなります)Featuredfloat1

これはフローティング左要素の順序であることに注意することが重要かもしれません:

  1. 特徴
  2. ニュース
  3. 見出し
  4. 知らせ

小さい画面のレイアウト (これはまったく問題ないように見えます。画面の解像度に基づく一貫性のないレイアウトを使用して、次の説明で何を意味するかをお見せしたかっただけです) float2

デザインに一貫性がある場合は、何らかのグリッド システムを実装してもかまいませんが、私の場合は画面解像度に基づいたスタイルを使用しているため、特定の画面解像度でボックスの幅が 50% から 100% に変化します (固定値はありません)。ここで使用)。

流動的なガードが正しい方法かもしれないと思っていましたが、それらをチェックした後 (以前は使用したことがありません) かなり静的に感じられ、この問題を解決できるかどうかはわかりません。

編集: 問題のサンプル: http://jsfiddle.net/UfVrH/ . AD の固定高さの値は、div を拡張するコンテンツをシミュレートするためだけにあることに注意してください。

4

1 に答える 1

0

このような問題を修正するには、各要素の幅と高さを計算し、絶対に配置して再配置する必要があります。幸運なことに、これを行うプラグイン Isotopeがあります。

于 2013-07-15T11:03:30.623 に答える