0

我有一个里面<div>有三个span4s，hero-unit每个里面都有一个span4。每个英雄单元内都有一些文字和图片。

这是一个演示：http: //jsfiddle.net/GGMWX/256/

还有代码，以防将来链接中断：

<div class="row-fluid"> 
    <span class="span4">
        <div class="hero-unit" id="col1">
            <h1 class="heading">One</h1>
            <p>Lorem ipsum</p>
            <img src="http://dummyimage.com/100x400/000/fff" class="image" />
        </div>
    </span>
    <span class="span4">
        <div class="hero-unit" id="col2">
            <h1 class="heading">Two</h1>
            <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
            <img src="http://dummyimage.com/100x200/000/fff" class="image" />
        </div>
    </span>
    <span class="span4">
        <div class="hero-unit" id="col3">
            <h1 class="heading">Three</h1>
            <p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
            <img src="http://dummyimage.com/100x200/000/fff" class="image" />
        </div>
    </span>
</div>

我一生无法弄清楚如何使所有英雄单位的高度相同。我尝试了以下方法，但由于各种原因，它们都不起作用（其中一些只适用于没有图片的文本，其中一个只适用于外部 div 标签内没有标签的纯文本）。或者也许我错过了一些东西——我对此很陌生。

http://tomdeater.com/jquery/equalize_columns/

http://jsfiddle.net/4HxVT/

http://www.filamentgroup.com/examples/equalHeights/和http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

有任何想法吗？

4

1 回答 1

1

加载文档后，您必须迭代项目，获取最高的项目，然后将它们全部设置为该高度，如下所示：

highest = null
hi = 0;
$(".hero-unit").each(function(){
    var h = $(this).height();
    if(h > hi){
        hi = h;
        highest = $(this);  
    }    
});
if(highest !== null){
    $('.hero-unit').css('height', highest[0].scrollHeight + "px");
}

http://jsfiddle.net/GGMWX/261/

于 2013-04-20T03:40:41.077 回答