如何在不使用固定高度的情况下在另一个div内获得两个div相同的高度

Question

您好我想知道是否无法将右列设置为与左侧列相同的高度，其中包含图像。一切都没有固定的高度？

小提琴：http://jsfiddle.net/GWZuq/3/

我的HTML：

<div class="wrapper">
    <div class="left_col"><img src="http://www.monstersandcritics.de/image.php?file=downloads/downloads/musik/zaschamoktanstateofmind_1/images/group1/Zascha-Moktan-State-Of-Mind_201128_248803_1_024.jpg&width=600"></div>
    <div class="right_col">some text ul etc</div>

</div> 

我的css：

.wrapper{
    width:80%;
}
.left_col{
    position:relative;
    width:80%;
    float:left;
}
.left_col img{
    position:relative;
    width:100%;
    height:auto;
}
.right_col{
    position:relative;
    width:20%;
    float:left;
    background-color:pink;
    height:100%; /* why is this not putting right col to 100% of the parent container?
}

非常感谢！

Answer 1

只需使用以下CSS（example）替换您的CSS：

.wrapper {
    width:80%;
    overflow:hidden;
}
.left_col {
    width:80%;
    float:left;
    padding-bottom:10000px;
    margin-bottom:-10000px;
}
.left_col img {
    display:block;
    width:100%;
    height:auto;
}
.right_col {
    width:20%;
    float:left;
    background-color:pink;
    padding-bottom:10000px;
    margin-bottom:-10000px;
}

替代解决方案

或者，您可以更改HTML和CSS以使用<figure>和<figcaption>（example）。该解决方案还允许垂直对齐：

HTML

<figure class="wrapper">
 <img src="http://www.monstersandcritics.de/image.php?file=downloads/downloads/musik/zaschamoktanstateofmind_1/images/group1/Zascha-Moktan-State-Of-Mind_201128_248803_1_024.jpg&width=600"><!-- Comment out white space
 --><figcaption>some text ul etc</figcaption>
</figure>

CSS

figure.wrapper {
    width:80%;
    overflow:hidden;
    background:pink;
}
figure.wrapper img {
    width:80%;
    display:inline-block;
    height:auto;
    vertical-align:middle; /* top, bottom, or middle to align image vertically */
}
figure.wrapper figcaption {
    width:20%;
    display:inline-block;
    vertical-align:middle; /* top, bottom, or middle to align caption vertically */
}

注意：此解决方案使用的新元素在IE8及更低版本中无效，除非它们是通过JavaScript注册的。这可以通过包含html5shiv（Google Code，GitHub）来解决。

Answer 2

如果要使用高度（或顶部和底部的绝对位置），则必须定义父级的高度。

您必须为父容器指定高度：

• 要么明确地给它一个高度
• 或绝对定位并指定顶部和底部

Answer 3

您必须将两个高度都设置为50％