CSS 框不会在顶部对齐

Question

我有 3 个高度不同的容器，我想将它们水平堆叠，但较小的盒子位于底部。我该如何解决？

这是我用于盒子的代码:

.brand{
border: 1px solid black;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 5px;
padding: 9px;
margin-top: 10px;
background-image: url('/pcbuilds/assets/images/squared_metal.png');
margin-left: auto;
margin-right: auto;
display: inline-block;
width: 200px;
}

Answer 1

vertical-align 必须用于内联和 inline-boxe 内容，默认 vertical-align 值为 baseline。:

.brand{
border: 1px solid black;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 5px;
padding: 9px;
margin-top: 10px;
background-image: url('/pcbuilds/assets/images/squared_metal.png');
margin-left: auto;
margin-right: auto;
display: inline-block;
vertical-align:top;
width: 200px;
}