html - 两个浮动的 div 并排，高度相同

Question

可能重复：
较大的 div 中的 2 个 div 必须等于相同的高度……但是如何？

我无法将 containerLeft div（红色背景）的高度自动设置为与 containerRight div 相同的高度。我特别希望它保持流动网格。

jsfiddle在这里：http: //jsfiddle.net/s7ufg/

Answer 1

如果您知道两列中的一列总是比另一列高，那么您可以执行以下操作：

演示

只需给position: absolute较短的列并使其从 延伸top: 0到bottom: 0。

HTML：

<div class='container'>
    <div class="containerLeft">
        <h2>1.</h2>
        <p>First, let's play a video.</p>
    </div>
    <div class="containerRight">
        <img src="http://tctechcrunch2011.files.wordpress.com/2012/09/michael-headshot-red.jpg?w=288" />
    </div>
</div>​

CSS：

.container { position: relative; }
.containerLeft { /* shorter column */
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 38%;
    padding: 2%;
    background-color: crimson;
}
.containerRight { /* taller column */
    margin: 0 0 0 42%;
    width: 58%;
    background: dodgerblue;
}​

---

如果您不确定其中哪一个会更高，那么您可以通过在其父级上使用背景渐变来模拟它们相等的事实。height

演示

HTML也是一样，CSS变成：

.container {
    overflow: hidden;
    background: -webkit-linear-gradient(left, crimson 42%, dodgerblue 42%);
    background: -moz-linear-gradient(left, crimson 42%, dodgerblue 42%);
    background: -o-linear-gradient(left, crimson 42%, dodgerblue 42%);
    background: linear-gradient(left, crimson 42%, dodgerblue 42%);
}
.containerLeft, .containerRight { float: left; }
.containerLeft {
    width:38%;
    padding: 2%;
}
.containerRight { width: 58%; }​

---

但是，CSS 渐变在 IE9 及更早版本中不起作用，所以如果你想要 IE8+ 的解决方案，那么你可以试试这个

演示

它使用:before和伪元素。:after

.container {
    overflow: hidden;
    position: relative;
}
.container:before,.container:after {
    position: absolute;
    z-index: -1;
    top: 0; bottom: 0;
    content: '';
}
.container:before {
    left: 0;
    width: 42%;
    background: crimson;
}
.container:after {
    right: 0;
    width: 58%;
    background: dodgerblue;
}
.containerLeft, .containerRight { float: left; }
.containerLeft {
    z-index: 2;
    width:38%;
    padding: 2%;
}
.containerRight { width: 58%; }​

Answer 2

您可以从一列中剪掉底部：http: //jsfiddle.net/gtGjY/

我补充说：

.containerLeft {
    padding-bottom: 1005px;
    margin-bottom: -1000px;
}
.outer { overflow: hidden; } /* div around both columns */

.containerRight img {
    display: block;
}​

Answer 3

浮动 div 的问题在于它们脱离了“正常流程”。这意味着 CSS 解释器不知道父级的大小，因此无法“自动”设置高度，您必须手动设置高度。

你的小提琴的这个更新应该让事情变得清楚：http: //jsfiddle.net/s7ufg/1/