並排身高問題

Question

事業部對準面我鋪設的產品圖片使用DIV中：

<div> 
     <img src="imgs/1.jpg" /> 
     <h3>Flowers Bunch</h3> 
     <span>Rs 500</span> 
</div> 

這些div都具有浮置左，所以他們並排取決於寬度可對準的一面。因此，可能會有2,3或4種產品連續排列顯示。

問題是如果其中一個div在同一行中佔用比其他高度更多的高度，那麼在下一行中，高度被擴展的div下面的空間未被使用並保持爲空。如何解決這個問題？

Answer 1

您有幾種選擇。

1）您可以爲元素設置最小高度，如果您確定它們不會高於該值。

2）您可以使用與位置的div：relative;溢出：隱藏;每行

3）您可以創建一個clearfix元素並在每行之後添加它。

.clearfix { clear: both; font-size: 0; line-height: 0; text-indent: 9999; } 

Answer 2

（只使用固定的高度將可能是最簡單的）另一個解決方案是使用像jQuery Masonry，與最終的結果看起來像這樣：