为什么盒子没有正确对齐?

时间:2011-04-15 23:58:13

标签: html css

<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项没有在顶部对齐?

2 个答案:

答案 0 :(得分:5)

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

有关详细信息,请参阅:

答案 1 :(得分:2)

使用float:left代替display:inline-block 以下是使用float:lefthttp://jsfiddle.net/techappetite/H7LfR/

的情况