不在同一行中的div顯示在CSS中

Question

我在另一個div容器（＃divs-test）中有兩個div（.diva和.divb）。

<div id="divs-test">
    <div class="diva"></div>
    <div class="divb"></div>
</div>

我想在同一行中顯示兩個div，所以這是我使用的CSS：

#divs-test{
    width: 100%;
}

#divs-test > div{
    height:40%;
}

.diva{
    width: 70%; 
}
.divb{
    width: 30%;
}

但是不會顯示div。

我究竟做錯了什么？

這是小提琴。

http://jsfiddle.net/cspX5/

Answer 1

為了使百分比高度（如height:40%起作用，您必須執行以下一項操作：

• 將height屬性設置為父級，而不是auto
• 從文檔的常規流程中刪除該元素（例如position: absolute ），以使其高度不會影響父級的元素。

如果不是，則相對於父母的高度設置的孩子的高度將取決於自身，因為父母的高度將取決於其內容的高度。

Answer 2

顯示div，它們的高度為零（如果要添加）

div { border:1px solid }

您將看到它們，請檢查以下內容： http : //jsfiddle.net/cspX5/3/

通常，只有當元素的父級定義了非自動高度時，（父級高度）的高度百分比才有效。