两个浮动的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%; }?