如何使一个内联块盒子固定在顶部？

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;

无法工作...

- mxcd

Answer 1

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

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

JSFiddle演示

- Hashem Qolami

---

它运行得很好！谢谢！只有一个问题：为什么我在蓝色框上应用vertical-align时，绿色框会向上移动？ - mxcd

@maximilian009 我正在Windows 7上的Chrome 32中进行测试，但是在fiddle演示中我没有看到这个问题。 - Hashem Qolami

我没有任何问题。我不明白为什么当我将垂直对齐顶部应用于绿色框时，蓝色框会向上移动。逻辑上讲，当我将样式应用于蓝色框时，蓝色框会向上移动，而将其应用于绿色框时，绿色框会向上移动，这不是更合理吗？ - mxcd

事实上，这种情况下，“blue”框仍然**在其“基线”上垂直对齐*。问题在于，更大的矩形框（绿色的）拉伸了父级*并影响了其他inline(-block)元素的视觉对齐。 - Hashem Qolami

Answer 2

你的 vertical-align 需要在蓝色容器上设置，而不是父容器。

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

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

- mayabelle

Answer 3

原问题的答案：

当您指定vertical-align: top时，元素的顶部与该行上最高元素的顶部对齐。在您的情况下，div兄弟姐妹a和b在父div container内处于同一行。因此，在div兄弟姐妹级别上给出垂直对齐的逻辑位置。

回答您的评论问题：

我不明白为什么将vertical-align-top应用于绿色框时蓝色框会向上移动。

如果将vertical-align: top属性应用于该行中最高的元素，则在您的情况下是div a的兄弟姐妹将与最高元素对齐。 如果您想进一步探索，请查看JSFiddle Example。

当我在最高的 c div 上设置 vertical-align: top 属性时，请看如何对齐 a，b，c，d 和 e 。在这种情况下，在兄弟 divs a、b、d和e 中， d 是最高的，因此它被对齐到最高的元素即 c ，但 a，b和e 与 d 的水平基线对齐，后者是次高的。

- Kirti Thorat

Answer 4

更好的方法来实现它。

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

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

- httpgio

---

垂直对齐用于表格。 - httpgio

...以及内联或内联块元素：）。你为什么在大声喊叫？ - kapa

我很惊讶没有人提到绝对定位。因为使用绝对定位，元素将从文档正常流中移除，容器将不知道绝对定位的元素来调整其高度。此外，我认为改变整个逻辑可能会给OP带来麻烦。此致。 - Hashem Qolami