爲什麼箱子沒有正確對齊？

Question

<div class="productcontainer"> 
<div class="product"><img src="products/p1.jpg" height="75" /><br />Item 1</div> 
<div class="product"><img src="products/p1.jpg" height="75" /><br />Item 2</div> 
<div class="product"><img src="products/p1.jpg" height="75" /><br />Item 3<br />Test</div> 
<div class="product"><img src="products/p1.jpg" height="75" /><br />Item 4</div> 
<div class="product"><img src="products/p1.jpg" height="75" /><br />Item 5</div> 
</div> 

.productcontainer { width: 320px } 
.product { width: 100px; height: 100px; display: inline-block; border: solid 1px #000000 } 

爲什麼項目3不在頂部？

Answer 1

您需要將vertical-align: top添加到.product。

欲瞭解更多信息，請參見：

• http://www.brunildo.org/test/inline-block.html
• http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 2

使用float:left，而不是display:inline-block 這是它看起來像float:left：http://jsfiddle.net/techappetite/H7LfR/