html - 流動的な（積み重ね可能な）コンテンツの問題

Question

私は50％の幅のdivと25％の幅のdivで構成される流動的なサイトを構築しています。私が抱えている問題は、特にChromeとの位置合わせです。

ここにコードをアップロードしました：http：//tekulated.com/test100/

.half { float: left; width: 50%; } .quater { float: left; width: 25%; } .half img, .quater img { width: 100%; display: block; }

Firefoxにサンプルをロードしてブラウザのサイズを変更すると、完全に機能することがわかります。ただし、 Chromeでは、divが不均衡に大きくなり、その結果、大きなギャップが生じます。

〜削除display: blockすると問題は修正されますが、画像のパディングの問題が発生します。

Answer 1

さて、何が起こっているのかというと、あなたの例の大きな赤いボックスは、行の仲間と比較して少し大きくなりすぎて、一番下の行の領域に入り、ボックスが右に押し出され、最後のボックスがラップされます。次の (論理) 行へ

大きな赤い画像の高さが小さい行の高さに比例していることを確認すると役立つと思います。それはすべての画像のサイズ変更の問題です。

それが役立つことを願っています。