Divs没有对齐

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改变他们的位置

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;