如何设置两个内联块div的样式，以便每个顶部都排成一行？

Question

我有这个HTML：

<div>
    <div id="testDetail1" style="display: inline-block;">
        <div class="gridBody">
            <div>A</div>
            <div>A</div>
            <div>A</div>
            <div>A</div>
            <div>A</div>
            <div>A</div>
        </div>
    </div>
    <div id="testDetail2" style="display: inline-block;">
        <div class="gridBody">
            <div>B</div>
            <div>B</div>
        </div>
    </div>
</div>

两个街区排在最底层。我尝试添加align：vertical但它似乎不起作用。我怎样才能让它们在顶部对齐？

Answer 1

align: vertical不正确：对vertical-align: top;申请div使用display: inline-block。

div[id^="testDetail"] {
   vertical-align: top;
}