Question

我想使用高度：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 url：http://jsfiddle.net/XqMDF/

Answer 1

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

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

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

Answer 2

要点是：将position: relative;添加到#container，将position: absolute;添加到height: 50%;的元素。另外，将display: block;应用于图像。然后在#image上添加左边距。该边距的值是具有height: 50%;的元素的宽度（在您的示例中为50px）。

这是包含所有属性的演示。

http://jsfiddle.net/XqMDF/1/

如何使用高度：如果未定义容器高度，则为50％？

2 个答案: