浮动分区，将高度调整为较大的分区

Question

我的问题：

我想让我的浮动div使其height适应更大的div。我尝试了许多方法，例如将.item的高度设置为100％，但这并不起作用。

我是否真的需要将.row显示设置为表格，还是有其他解决方案可以解决这么简单的问题？谢谢你的帮助。

＆＃13;

＆＃13;

.item {
  background-color: lightblue; 
  padding-bottom: 25px;
}

.left {
  float: left;
}

.right {
  float: right;
  margin-left: 50px;
}

＆＃13;

<div class="row">
      <div class="item left">
          <img src="http://lorempixel.com/400/400"" />
      </div>
      <div class="item right">
          <img src="http://lorempixel.com/400/200"" />
      </div>
      <div style="clear: both;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

_{请忽略lorempixel图片，我只是将它们包含在内以证明我的问题}

Answer 1

我认为你不能在浮动元素上使用CSS来实现这一点。 但是这很容易用jQuery实现。

Here's a fiddle

基本上，它使用了Paul Irish的最大高度代码段。

$.fn.setAllToMaxHeight = function(){
return this.height( Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ) );
}

$('.item').setAllToMaxHeight();

Answer 2

如何在浮动元素之后清除，例如。像这样：

.row {overflow: hidden}

看到这个小提琴：http://jsfiddle.net/99tm9zxg/

当然，它没有提高较高元素的元素高度，但你不需要它。实际上，没有必要同时具有相同高度的元素。

Answer 3

最佳解决方案是使用table-cell：

.item {
  background-color: lightblue; 
  padding-bottom: 25px;
  display:table-cell;
  vertical-align:middle;
}

检查下面的代码段

.item
{
  background-color: lightblue; 
  padding-bottom: 25px;
  display:table-cell;
  vertical-align:middle;
}

<div class="row">
  <div class="item left">
    <img src="http://lorempixel.com/400/400" />
  </div>
  <div class="item right">
    <img src="http://lorempixel.com/400/200" />
  </div>
</div>