html - 同一行中的 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不显示。

我做错了什么？

这是 jfiddle。

http://jsfiddle.net/cspX5/

Answer 1

为了使像 height:40% 这样的百分比高度有效，您必须执行以下操作之一:

• 为父级设置一个height属性，不同于auto
• 从文档的正常流中删除该元素(例如 position: absolute)，这样它的高度就不会影响父元素的高度。

否则，相对于父项设置的子项高度将取决于自身，因为父项的高度将取决于其内容的高度。