0

我希望左侧与右侧（包含图像）div高度相同。div问题是图像是流动的（也就是说，我不能在左边有一个特定的大小div）。

这可能吗？

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

3 回答 3

2

遗憾的是，这不能用 CSS 直接完成……它需要 JavaScript。这是使用 jQuery 的方法

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

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

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

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);

});
于 2012-10-08T22:48:51.980 回答
1

VKen，看起来你想要实现的是一个 Faux Column 布局。

一个非常简单（无 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 更长，反之亦然）。

有关更多信息，A list apart 有一篇很好的文章：http ://www.alistapart.com/articles/fauxcolumns/

于 2012-10-08T23:29:09.917 回答
0

这是一个列表，其中包含不同的方法来做到这一点：http ://css-tricks.com/fluid-width-equal-height-columns/

于 2012-10-09T00:39:08.203 回答