1

我目前正在开发一个使用 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>

我试过这个插件，像这样实例化它：

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

没有任何影响：-/

我还尝试了以下方法：

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

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

有谁知道解决这个问题？

提前致谢。

4

2 回答 2

0

将您的 window.load 更改为准备好文档。它有点快。

<script>
    $(function(){
        // Ensure equal heights on thumbnail boxes
        $('.thumbnail').equalHeights();
    });
</script>
于 2012-11-30T10:55:11.860 回答
0

是的，只有 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 个拇指它就会断线。只需在所有断点中配置它，它就会正常工作。`

于 2014-08-05T19:57:55.840 回答