html - 如何使用高度:50% if the container height is not defined?

Question

我想使用 height: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/

Answer 1

正确的解决方案是定义容器高度。或引用正文或其他定义的元素。

制作容器 display:inline-block; 以调整图像高度...或定义固定高度。

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