行內塊div不能同時垂直排列在頂部

儘管嘗試創建兩個（div）面板的響應式「網格」（以便它們在寬屏幕上彼此相鄰並且在查看時位於彼此之上更小的屏幕），我注意到div在顯示'block-inline'時顯示爲在底部對齊。這裏是JSFiddle：http://jsfiddle.net/cY6GG/。有沒有辦法扭轉這種情況，並使兩個div頂部對齊？行內塊div不能同時垂直排列在頂部

下面是HTML：

<div id='bigdiv'> 
<h1>Lots of Content</h1> 
<p>(lots of text)</p> 
</div> 
<div id='littlediv'> 
<p>Not too much content</p>

而CSS：

#bigdiv { 
display:inline-block; 
/*float:left;*/ 
width:40%; 
background:#CCFFFF; 
} 
#littlediv { 
background: #FFCCFF; 
display:inline-block; 
/*float:left;*/ 
width:40%; 
}

我曾嘗試：

float:left

但後來好像沒有很好的，語義讓平板在中心水平對齊的方式。所有的建議將不勝感激。謝謝！

來源

2014-01-09 Fin Moorhouse

添加vertical-align:top;的造型爲＃littlediv

來源

2014-01-09 20:48:15 bboysupaman

這個回答我的問題，我無法相信我錯過了它 - 謝謝！ –

是，添加此將它們對準頂部div{ vertical-align:top;}

來源

2014-01-09 20:48:02 n1kkou

正如其他人所說，你可以添加vertical-align:top;到的div對準他們。

至於在小屏幕上堆疊它們，你需要一個CSS3媒體查詢。

@media screen and (max-width : 600px) 
{ 
    #bigdiv, 
    #littlediv 
    { 
     width:100%; 
     display:block; 
    } 
}

工作小提琴：（拖動輸出框的左邊來調整）

http://jsfiddle.net/FrF4y/2/

來源

2014-01-09 20:54:12 Dolchio

感謝您的答案，vertical-align解決了它。我知道如何使用媒體查詢，但無論如何感謝！ –

行內塊div不能同時垂直排列在頂部

回答

相關問題