Question

我目前正在开发一个网站，我正在使用Twitter Boostrap作为前端。在首页上我有三个框（Twitter Boostrap术语中的缩略图框），其中包含图像和一些文本。但问题是，根据图像的高度和描述文本的数量，这些框可以具有不同的高度。

我的标记如下：

<ul class="thumbnails">
    <li class="span4">
        <div class="thumbnail">
            <img src="img/products/1.png" alt="">
            <h3>Thumbnail label</h3>
            <p>Thumbnail caption...</p>
        </div>
    </li>          
    <li class="span4">
        <div class="thumbnail">
            <img src="img/products/2.png" alt="">
            <h3>Thumbnail label</h3>
            <p>Thumbnail caption...</p>
        </div>
    </li>   
    <li class="span4">
        <div class="thumbnail">
            <img src="img/products/3.png" alt="">
            <h3>Thumbnail label</h3>
            <p>Thumbnail caption...</p>
        </div>
    </li>   
</ul>

我尝试使用this plugin，将其实例化为：

<script>
    $().ready(function () {
        // Ensure equal heights on thumbnail boxes
        $('.thumbnail').equalHeights();
    });
</script>

没有任何影响： - /

我也尝试了以下内容：

// Ensure equal heights on thumbnail boxes
$('.thumbnail').css({
    'height': $('.thumbnail').height()
});

然后它将缩略图框设置为90px高度。

有人知道解决方案吗？

提前致谢。

Answer 1

将window.load更改为文档就绪。它的速度要快一些。

<script>
    $(function(){
        // Ensure equal heights on thumbnail boxes
        $('.thumbnail').equalHeights();
    });
</script>

Answer 2

是的，只有CSS的解决方案。

HTML：

<ul class="thumbnails">
<li class="span4 thumbnail">
        <img src="img/products/1.png" alt="">
        <h3>Thumbnail label</h3>
        <p>Thumbnail caption...<br/> with 2 lines</p>
    </div>
</li>          
<li class="span4 thumbnail">
        <img src="img/products/2.png" alt="">
        <h3>Thumbnail label</h3>
        <p>Thumbnail caption...<br/> with 2 lines</p>
    </div>
</li>   
<li class="span4 thumbnail">
        <img src="img/products/3.png" alt="">
        <h3>Thumbnail label</h3>
        <p>Thumbnail caption with 1 line...</p>
    </div>
</li>   
<li class="span4 thumbnail">
        <img src="img/products/3.png" alt="">
        <h3>Thumbnail label</h3>
        <p>Thumbnail caption...</p>
    </div>
</li>

CSS

.thumbnail:nth-child(3n+1) {
    clear: left;
}

（在上面的例子中，每3个拇指它会打破一条线。只需在所有断点中配置它就可以正常工作。

Twitter引导程序确保缩略图框的高度相等

2 个答案: