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

Question

  

可能重复：
  2 divs in a larger div must equal the same height… but how?

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

jsfiddle here：http://jsfiddle.net/s7ufg/

Answer 1

如果您知道两列中的一列总是比另一列高，那么您可以这样做：

demo

只需将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;
}​

---

如果您不确定哪一个会更高，那么您可以使用background {{模拟 它们相等height的事实3}}在他们的父母身上。

gradient

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%; }​

---

然而，demo，所以如果你想要IE8 +的解决方案，那么你可以试试这个

CSS gradients don't work in IE9 and older

使用demo和: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

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

对你的小提琴进行更新应该清楚明白：http://jsfiddle.net/s7ufg/1/

Answer 3

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

我补充说：

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

.containerRight img {
    display: block;
}​