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

本文介绍了两个浮动div并排，高度相同的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

Possible Duplicate: 2 divs in a larger div must equal the same height… but how?

我无法自动设置containerLeft的高度div（红色背景）与我的containerRight div相同的高度。我特别希望这个流畅的网格。

I'm having trouble auto setting the height of my containerLeft div (red background) the same height as my containerRight div. I specifically want this to stay a fluid grid.

jsfiddle这里： jsfiddle/s7ufg/

jsfiddle here: jsfiddle/s7ufg/

推荐答案

如果您知道两列之一总是比其他的高，那么你可以这样做：

If you know that one of the two columns is always going to be taller than the other, then you can do something like this:

只需将 position：absolute 添加到较短的列中，并从 top：0 到 bottom：0 。

Just give position: absolute to the shorter column and make it stretch from top: 0 to 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="tctechcrunch2011.files.wordpress/2012/09/michael-headshot-red.jpg?w=288" /> </div> </div>​

CSS p>

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 变为：

HTML is the same, CSS becomes:

.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 +的解决方案，那么您可以尝试此

However, CSS gradients don't work in IE9 and older, so if you want a solution for IE8+, then you can try this

它使用 ：之前 和 ：之后 伪元素。

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