同一行中的div不显示在css中

Question

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

<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），以使其高度不会影响父文件的高度。

如果没有，孩子的高度（相对于父母的高度）将取决于自己，因为父母的身高取决于其内容的高度。

Answer 2

如果要添加

，则显示Div，它们的高度为零

div { border:1px solid }

你会看到它们，请查看：http://jsfiddle.net/cspX5/3/

一般来说：高度百分比（父高）只有在元素的父元素定义了非自动高度时才有效。