0

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

小提琴：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?
}

非常感谢！

4

3 回答 3

3

只需将您的 CSS 替换为以下 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>（示例）。此解决方案还允许垂直对齐：

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 ) 来克服。

于 2012-07-05T14:59:01.720 回答
1

如果要使用高度（或上下绝对定位），则必须定义父级的高度。

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

  • 要么明确地给它一个高度
  • 或使用绝对定位并指定顶部和底部
于 2012-07-05T14:54:13.433 回答
0

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

于 2012-07-05T14:54:26.493 回答