Html 如何在不使用固定高度的情况下使另一个div中的两个div具有相同的高度

您好，我想知道是否不可能将右栏设置为与左栏相同的高度，并在其中包含图像。没有固定高度的一切

小提琴：

我的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> 

非常感谢

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

必须为父容器指定高度：

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

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

必须为父容器指定高度：

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

---

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

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

只需将CSS替换为以下CSS（）：

.wrapper{
宽度：80%；
溢出：隐藏；
}
.左沟{
宽度：80%；
浮动：左；
垫底：10000px；
利润底部：-10000px；
}
.左沟{
显示：块；
宽度：100%；
高度：自动；
}
.对{
宽度：20%；
浮动：左；
背景颜色：粉红色；
垫底：10000px；
利润底部：-10000px；
}

替代溶液 或者，您可以将HTML和CSS更改为使用

和

（）。此解决方案还允许垂直对齐：

HTML

---

注意：此解决方案使用的新元素在IE8及更低版本中不起作用，除非它们通过JavaScript注册。这可以通过包含html5shiv（，）来克服。

只需将CSS替换为以下CSS（）：

.wrapper{
宽度：80%；
溢出：隐藏；
}
.左沟{
宽度：80%；
浮动：左；
垫底：10000px；
利润底部：-10000px；
}
.左沟{
显示：块；
宽度：100%；
高度：自动；
}
.对{
宽度：20%；
浮动：左；
背景颜色：粉红色；
垫底：10000px；
利润底部：-10000px；
}

替代溶液 或者，您可以将HTML和CSS更改为使用

和

（）。此解决方案还允许垂直对齐：

HTML

---

注意：此解决方案使用的新元素在IE8及更低版本中不起作用，除非它们通过JavaScript注册。这可以通过包含html5shiv（，）来克服。

这是因为

float:left

使包装器获得0像素的高度所有这些

位置：相对的
是什么原因？这是因为
float:left
使包装器获得0像素的高度所有这些
位置：相对的
是什么原因，添加
页边距：0自动到
.wrapper
（）。看起来像黑客。难道不存在更优雅的方式吗？@dragn，这是一种有效的黑客手段。与非黑客（例如，
display:table；
或flexbox）相比，它们在很多浏览器中都不起作用。事实上，这是定义的行为，所以它不是真正的黑客行为（就像star hack一样）。@maco，你的例子打破了滚动，文本从框中流出（这比我的例子更像黑客行为）。看见另一方面，我的代码将两列的背景向下扩展，如果其中一列比另一列高（）。@bfrohs，我的意思是CSS外观。你没有错。然而，我认为“让右盒子和左盒子一样高”是这个问题需要的答案。几乎在这种情况下（没有高度CSS），右框比左框小。所以，我认为没有必要像它的例子那样去思考这个异常的案例。这和右边框中的一些元素在代码中大于10000px是一样的，不是吗？@Jurudocs，添加
margin:0 auto到
.wrapper
（）。看起来像黑客。难道不存在更优雅的方式吗？@dragn，这是一种有效的黑客手段。与非黑客（例如，
display:table；
或flexbox）相比，它们在很多浏览器中都不起作用。事实上，这是定义的行为，所以它不是真正的黑客行为（就像star hack一样）。@maco，你的例子打破了滚动，文本从框中流出（这比我的例子更像黑客行为）。看见另一方面，我的代码将两列的背景向下扩展，如果其中一列比另一列高（）。@bfrohs，我的意思是CSS外观。你没有错。然而，我认为“让右盒子和左盒子一样高”是这个问题需要的答案。几乎在这种情况下（没有高度CSS），右框比左框小。所以，我认为没有必要像它的例子那样去思考这个异常的案例。这与右边框中的某些元素在代码中大于10000px是一样的，不是吗？这是一种更干净的方法这是一种更干净的方法
.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?
}

<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>