潜水者没有排队

Question

不确定我在这里做错了什么，但只要我放上项目标题和子内容，第一个div就会下降。而不是呆在白色盒子里。

<div style="width:49%; height:100px; background-color:white;">
    <div style="display: inline-block; width:100px; height:100%; background-color:red;">date and time</div>
    <div style="display: inline-block; height:100%; background-color:blue;">
        <div style="font-size:xx-large;">item title</div>
        <p> item sub content</p>
    </div>
</div>

查看屏幕截图：scrshot

Answer 1

将vertical-align: top;添加到div，如下所示：

Fiddle

HTML:

<div style="width:49%; height:100px; background-color:white;">
    <div style="vertical-align: top; display: inline-block; width:100px; height:100%; background-color:red;">date and time</div>
    <div style="vertical-align: top; display: inline-block; height:100%; background-color:blue;">
        <div style="font-size:xx-large;">item title</div>
        <p> item sub content</p>
    </div>
</div>

Answer 2

通过浮动可以防止div更改其位置

<div style="width:49%; height:100px; background-color:white;">
    <div style="display: inline-block; width:100px; height:100%; background-color:red; float: left;">date and time</div>
    <div style="display: inline-block; height:100%; background-color:blue;">
        <div style="font-size:xx-large;">item title</div>
        <p> item sub content</p>
    </div>
</div>