如何使用高度：如果未定义容器高度，则为50％？(How to use height:50% if the container height is not defined?)

如何使用高度：如果未定义容器高度，则为50％？(How to use height:50% if the container height is not defined?)

我想使用高度：50％，但容器的高度没有定义，什么是正确的解决方案？

<div id="container"> <div id="left-50"> <div id="left-50-1">1</div> <div id="left-50-2">2</div> </div> <div id="image"> <img src="http://automarka.hu/images/stories/Audi%20A8%202.8%20V6%20FSI%202007.jpg"> </div> </div> #container { overflow:hidden; } #left-50 { float:left; } #left-50-1 { height:50%; width:50px; background:yellow; } #left-50-2 { height:50%; width:50px; background:purple; } #image { float:left; }

Jsfiddle网址： http ： //jsfiddle.net/XqMDF/

I would like to use height:50%, but the container's height is not defined, what's the correct solution?

<div id="container"> <div id="left-50"> <div id="left-50-1">1</div> <div id="left-50-2">2</div> </div> <div id="image"> <img src="http://automarka.hu/images/stories/Audi%20A8%202.8%20V6%20FSI%202007.jpg"> </div> </div> #container { overflow:hidden; } #left-50 { float:left; } #left-50-1 { height:50%; width:50px; background:yellow; } #left-50-2 { height:50%; width:50px; background:purple; } #image { float:left; }

Jsfiddle url: http://jsfiddle.net/XqMDF/

最满意答案

正确的解决方案是定义容器高度。 或参考身体或其他定义的元素。

make container display:inline-block; 调整图像高度...或定义固定高度。

演示：http：//jsfiddle.net/XqMDF/2/

the correct solution is to define container height. or refer to the body or other defined element.

make container display:inline-block; to adjust to image height ... or define a fixed height.

DEMO: http://jsfiddle.net/XqMDF/2/