Div不能对齐

不知道我在这里做错了什么，但只要我把项目标题和子内容，第一个div下降。而不是留在白盒子里。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

来源

2014-10-16 Glen

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

来源

2014-10-16 23:08:15

@Glen这需要做的事情，因为对于'垂直align'的默认值是'baseline'。因此，默认情况下，内联块的div会共享相同的最低文本基线，这是您截图显示的内容。 – TroyHaskin 2014-10-16 23:19:59

谢谢，这解决了问题，也感谢您的信息。 – Glen 2014-10-17 17:50:01

通过莲花g您可以阻止的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>

来源

2014-10-16 23:33:16

回答

Fiddle

HTML：

相关问题