html - 内联列被下推

Question

我有一个 40% 和一个 60% 的内联列，但出于某种原因，当我将内容放入其中时，其中一个容器被下推了。有谁知道为什么会这样？

Here is a fiddle

HTML

<div class="grid">
    <div class="long-col">a</div>
    <div class="small-col">
        <div style="font-size:18px;width:100%;">a</div>
        <div style="font-size:18px;width:100%;">b<div>
    </div>
</div>

CSS

.grid { font-size:0px;}
.grid .long-col { 
    display:inline-block;
    width:40%;
    height:500px;
    background-color:green;
}
.grid .small-col {
    display:inline-block;
    width:60%;
    height:500px;
    background-color:yellow;
}

Answer 1

添加vertical-align top

.grid .long-col {
    background-color: green;
    display: inline-block;
    height: 500px;
    vertical-align: top;
    width: 40%;
}
.grid .small-col {
    background-color: yellow;
    display: inline-block;
    height: 500px;
    vertical-align: top;
    width: 60%;
}