多个div横向排列，其中一个div内容为空，为什么其他div会被顶到下面（设置了float或flex布局却不会）

Question

问题描述

如图多个div横向排列，其中一个div内容为空，为什么其他div会被顶到下面（设置了float或flex布局却不会）

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
html:

<div class="container">
     <div style="background: #fff;">时间</div>
     <div style="background: #eee"></div>
     <div style="background: #ddd">存款</div>
     <div style="background: #ccc">投资</div>
</div>

css:

.container{
    width: 1000px;
    height: 200px;
    margin: 20px auto;
    background: #ff0;
    box-sizing: border-box;
}
.container div{
    height: 200px;
    line-height: 200px;
    margin: 0;
    padding: 0;
    border-width: 0;
    width: 20%;
    display: inline-block;
    box-sizing: border-box;
}

Answer 1

跟vertical-align有关，没有文本时会以最下方为baseline，和其他文字对齐
设置vertical-align:top即可
添加如下样式

.container div{
    vertical-align:top
}

Answer 2

链接描述