内联列被推倒了

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%;
}

Answer 2

只需在float: left;中添加.grid .long-col 只是因为您在.grid .small-col中使用了额外的div而发生了这种情况，因此请在float: left;

中添加.grid .long-col