将内联块DIValignment到容器元素的顶部

当两个inline-block div具有不同的高度时，为什么两个inline-block中的较短的不与容器顶部alignment？ （ DEMO ）：

HTML：

 <div class="container"> <div class="small"></div> <div class="big"></div> </div> 

CSS：

 .container { border: 1px black solid; width: 320px; height: 120px; } .small { display: inline-block; width: 40%; height: 30%; border: 1px black solid; background: aliceblue; } .big { display: inline-block; border: 1px black solid; width: 40%; height: 50%; background: beige; } 

我怎样才能alignment它的容器顶部的小div ？

Answer 1

因为vertical-align默认设置为基线 。

用这个代替：

 .small{ display: inline-block; width: 40%; height: 30%; border: 1px black solid; background: aliceblue; vertical-align:top; } 

http://jsfiddle.net/Lighty_46/RHM5L/9/

或者@ f00644说你也可以将float应用到子元素。

Answer 2

你需要添加一个vertical-align属性到你的两个子div。

如果.small总是比较短，您只需将该属性应用于.small 。 但是，如果哪一个可能最高，那么您应该将该物业应用于.small和.big 。

 .container{ border: 1px black solid; width: 320px; height: 120px; } .small{ display: inline-block; width: 40%; height: 30%; border: 1px black solid; background: aliceblue; vertical-align: top; } .big { display: inline-block; border: 1px black solid; width: 40%; height: 50%; background: beige; vertical-align: top; } 

垂直alignment会影响内联或表格单元格的内容，并且此属性的值不同。 有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align 。

Answer 3

将overflow：auto添加到容器div。 http://www.quirksmode.org/css/clearing.html本网站在出现此问题时会显示一些选项。;