Question

我希望左div与右div（包含图片）的高度相同。问题是图像是流动的（也就是说，左边div不能有特定的尺寸）。

这可能吗？

<div class="container">
    <div class="left">
        <div>text</div>
        <div>text</div>
    </div>
    <div class="right">
        <div>image</div>
    </div>
</div>

Answer 1

可悲的是，这不能用CSS直接完成......它需要JavaScript。以下是使用jQuery

的方法

var highestCol = Math.max($('.left').height(),$('.right').height());
$('.container > div').height(highestCol);

这将获得较高的<div>的高度，然后将其分配给左右两侧。这样两者都具有相同的高度。

我建议您在左右div中添加类似column的类。然后你可以使用：

var highestCol = Math.max($('.left').height(),$('.right').height());
$('.column').height(highestCol);

我们也可以将它用作jQuery插件......考虑一下：

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

通过这种方式，您可以在任何希望它们具有相同高度的div上使用它。

$('div.columns').setAllToMaxHeight();

当然，我们希望我们的代码在所有图像被加载时运行（因为如果不是并且DOM准备就绪，高度将不正确），所以我们将代码包装在：

$(window).load(function () {
    // use the plugin way :
    $('div.columns').setAllToMaxHeight();

    // or use the other way :
    var highestCol = Math.max($('.left').height(),$('.right').height());
    $('.column').height(highestCol);

});

Answer 2

VKen，你想要实现的是人造柱布局。

一个非常简单（无js）的解决方案是使用覆盖容器div的图像：

.container{overflow:hidden;background: url(faux_background.jpg) repeat-y}
.left,
.right{float:left;}
.left{width:30%}

执行以下操作：无论高度如何，容器都会包裹左右div。左边的div总是30％。容器div的背景将释放出无限增长的左div的错觉（假设正确的div更长，反之亦然）。

有关详细信息，请单独列出一篇很好的文章：http://www.alistapart.com/articles/fauxcolumns/

Answer 3

以下是使用不同方法执行此操作的列表：http://css-tricks.com/fluid-width-equal-height-columns/

Div高度取决于另一个div中的图像

3 个答案: