display：inline-block; divs行爲不正常

Question

我有一個主要的div，並在其中三個div。他們都被賦予了30％的寬度，並且他們都集中在主格中。

我用display：inline-block;所以三個div彼此相鄰，但是當我給他們一個高度的任何東西時，最左邊的兩個會下降一點，而右邊的一個停留在它應該在的地方。所有這些都是簡單的輸入，沒有什麼可以動態增加div的大小。

我該如何解決這個問題？

Answer 1

是的。三個divs必須漂浮在左邊，以便它們應該精確對齊。沒有浮動，他們可以在不同的瀏覽器中產生問題。

CSS代碼

#wrapper { width: 100%; height: auto; margin: 0; padding: 0;} 
.inner { width: 30%; float:left; min-height:50px; margin:0 5px 0 0;} 

HTML代碼

<div id="wrapper"> 
    <div class="inner"></div> 
    <div class="inner"></div> 
    <div class="inner" style=" margin:0;"></div> 
</div> 

Answer 2

沒有任何實時代碼很難解決這個問題，但給這些問題一下子。對於主DIV中的DIV，分配類vertical-align:top

另一種選擇（或以及）是將line-height設定到所需的高度，而不是height。

如果你沒有這些運氣，我建議你把你的HTML和CSS上jsfiddle。

Answer 3

這是一個工作解決方案。 http://jsfiddle.net/j3zjg/

<style> 
#container{ 
    width:500px; 
    height:300px; 
    border:1px solid red; 
} 

#container div{ 
    width:30%; 
    float:left; 
    height:40px; 
    background:red; 
    margin-right:5px; 
} 
</style> 

<div id="container"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div>