不在同一行中的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/

通常，只有当元素的父级定义了非自动高度时，（父级高度）的高度百分比才有效。