css：位置元素在顶部与另一个元素而不是底部齐平

Question

我有3个元素内联块相互之间。默认情况下，2个较小的网格与较大图表的底部齐平。如何让它们与较大图表的顶部齐平。 http://i.imgur.com/TAUG2rZ.png

我宁愿不必给每个元素一个绝对的位置，除非这是唯一的方法。

所有应用atm：

#smallgrid1, #largechart, #smallgrid2{
       display: inline-block;}

Answer 1

如果要将它们与顶部对齐，请将vertical-align:top添加到css。

您可能想要的vertical-align的其他选项是：middle, baseline, bottom etc.

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Answer 2

#smallgrid1, #largechart, #smallgrid2{ display: inline-block; vertical-align: top; }

Answer 3

您好，可以试试这个

#smallgrid1, #largechart, #smallgrid2{
   display: inline-block; vertical-align: top}

Answer 4

默认情况下，如果元素最终不会将自己对齐到顶部，我会使用vertical-align属性将每个inline-block元素定位到top }。

我创建了a simple CodePen，可以更清楚地证明这一点。请注意我如何设置页面上每个div元素的样式：

div.element {
    display: inline-block;
    vertical-align: top; /* aligns each of the divs to the top of the container */
}

在这种情况下，元素ID被任意命名为element1，element2和element3，但您可能会将它们命名为smallgrid1，largechart，和smallgrid2分别。