Question

虽然尝试创建一个由两个（div）面板组成的响应式“网格”（这样在宽屏幕上它们彼此相邻，并且在较小的屏幕上查看时彼此叠加），我注意到了div，当时显示'block-inline'，似乎在底部对齐。这是JSFiddle：http://jsfiddle.net/cY6GG/。有没有办法扭转这种情况，让两个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

但是，似乎没有好的，语义的方法让面板在中心水平对齐。所有建议将不胜感激。谢谢！

Answer 1

是的，添加此项以将它们对齐到顶部div{ vertical-align:top;}

Answer 2

将vertical-align:top;添加到＃littlediv

的样式中

Answer 3

正如其他人所说，您可以将vertical-align:top;添加到div中以对齐它们。

至于在较小的屏幕上将它们堆叠在一起，你需要一个CSS3媒体查询。

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

工作小提琴:(拖动输出框的左边缘以调整大小）

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

内联块div不能垂直对齐顶部

3 个答案: