一个div内的两个行内块级元素(一个有内容,-一个无内容)不对齐

<style>
    .inline-block {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #aaa;
        /*vertical-align: middle;*/
    }
</style>
...
<div>
    <div class="inline-block"></div>
    <div class="inline-block>x</div>
</div>

原因: 基线不一致 解决: 给 inline-block 类添加 veritcal-align

参考自csdn