Question

我尝试将蓝色容器贴在顶部。我该如何管理？

HTML：

<div class="container">
    <div class="a">blue</div>
    <div class="b">green</div>
</div>

CSS：

.a {
    width:100px;
    height:400px;
    display:inline-block;
    background-color:blue;
}
.b {
    width:400px;
    height:600px;
    display:inline-block;
    background-color: green;
}
.container {
    vertical-align:top;
}

http://jsfiddle.net/xswa4/

vertical-align: top;

不起作用......

Answer 1

您应该在元素.a上使用vertical-align:top;，而不是父.container：

.a {
    display:inline-block;
    background-color:blue;
    vertical-align:top;
}

<强> JSFiddle Demo

Answer 2

您的vertical-align需要位于蓝色容器上，而不是父容器。

.a
{
    width:100px;
    height:400px;
    display:inline-block;
    background-color:blue;
    vertical-align: top;
}

小提琴：http://jsfiddle.net/xswa4/3/

Answer 3

更好的方法。

.container{position:relative;}
.a {position:absolute;top:0;}

我很惊讶没有人提到绝对定位。

Answer 4

回答原始问题：

指定vertical-align: top元素的顶部与最高元素on the line的顶部对齐。在您的情况下，父div [{1}}中的div兄弟a and b are on the line。因此，给出垂直对齐的逻辑位置是container级别。

回答你的评论问题：

div sibling

如果I don't understand why the blue box moves up when I apply vertical-align-top to the green box.属性应用于该行的最高元素，那么在您的情况下为vertical-align: top的兄弟将与最高对齐。如果您想了解更多内容，请查看JSFiddle Example。

当我在{{div a属性上设置a属性时，看看b，c，d，e和vertical-align: top是如何对齐的1}}这是最高的一个。在这种情况下，在兄弟姐妹c div中，divs a, b, d and e是最高的，因此它与最高元素对齐，即d但c，a和{{1与b的水平基线对齐，后者是下一个最高的。

如何使一个内联块盒贴在顶部？

4 个答案: