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

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

最佳答案

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

更多信息,请参阅:

关于html - 为什么盒子没有正确对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5683461/

相关文章:

javascript - jquery 脚本仅在桌面上工作

html - CSS如何在保持居中的同时 Conceal 调整大小的div

javascript - 更改电脑时区后,Chrome 无法正确获取时区名称

html - iOS WebView : open single hyperlink in external browser

javascript - 如何停止 CSS 转换中的转换

html - CSS 从数组中选择一个随机颜色

javascript - 如何让文本区域中的某些字符不可编辑

javascript - Ng 级条件语法

javascript - 在 Rails 应用程序中隐藏标签云

javascript - 单击时更改 <span> 的内容