Question

我有两个并排的内嵌块元素，最小高度设置为100％。如果我在它们的父包装上设置一个实际高度，它们就会延伸到它，但这不是我想要的：我希望它们都伸展到两者中最大的一个。以下是它们的结构：

<div style="position:relative;">
    <div id="leftSection">
        <div style="height:200px;"></div>
    </div><div id="rightSection">
    <div style="height:300px;"></div>
    </div>
</div>

JSFiddle： http://jsfiddle.net/VT9Rk/

当然，使用Javascript很容易，但我只是在寻找CSS。谢谢！

Answer 1

您可以使用css tables执行此操作。

只需在容器div和

上添加display: table;即可你的leftSection和rightSection div上的

display: table-cell;

<强> FIDDLE

CSS

.container
{
    display: table;
}
#leftSection {
    display: table-cell;
    width:50px;
    min-height:100%;
    background-color:blue;
    vertical-align:top;
}
#rightSection {
        display: table-cell;
    width:100px;
    min-height:100%;
    background:red;
    vertical-align:top;
}

PS：浏览器支持非常好：IE8 +，所有现代浏览器和移动设备（caniuse）

Answer 2

如何使用flexbox：

<div class="container">
  <div class="a">lorem</div>
  <div class="b">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatem.</div>
</div>

.container {
    display:flex;
    width:300px;
    background-color: yellow;
}
.container > div {
    width:50%;
}
.a {
    background-color: red;
}
.b {
    background-color: blue;
}

jsfiddle以供参考

Answer 3

您可以使用flexbox轻松完成此操作：

将您的持有容器设置为display: flex，您应该设置

http://jsfiddle.net/VT9Rk/

显示：内联块元素，并排延伸到父级？

3 个答案:

CSS