css - 浮遊画像を抱きしめる李

Question

次のページをアップロードして、あなたが私を助けてくれるのを簡単にしました: http://www.rebuslondon.com/GEBROCHUREcopy.html ページを最適化していないので、Internet Explorer を使用しないでください。

ご覧のとおり、3 つのオレンジ色と 1 つの黄色の 4 つの画像があります。オレンジ色のものは単に親要素に埋め込まれていますが、黄色のものはフローティングされているため、ブラウザ ウィンドウが拡大されたときに親要素の右端にくっつきます。これは問題なく動作しますが、ウィンドウを狭くすると (たとえば 1024*768)、フローティング画像の下に隙間ができます。

そのギャップをなくす方法はありますか？問題が何であるかを理解するための最良の方法は、ブラウザー ウィンドウのサイズを変更することだと思います。ウィンドウが狭いほど、ギャップが大きくなることがわかります。

どうもありがとう！

Answer 1

問題は、li.right の直後の li に clear:both を追加したことです。このルールを削除すると、正常に表示されます。

#portfolio #container > ul.projFlow li.floated + li {
    clear: both;
}

Answer 2

content.css の 90 行目から clear both を削除するだけです

#portfolio #container > ul.projFlow li.floated + li {
clear: both;
}

それを完全に取り除くだけで問題ありません。