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：

相關問題