我目前正在开发一个网站,我在其中使用 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
高度。
有人知道解决这个问题的方法吗?
提前致谢。
最佳答案
将您的 window.load 更改为文档就绪。速度有点快。
<script>
$(function(){
// Ensure equal heights on thumbnail boxes
$('.thumbnail').equalHeights();
});
</script>
关于jquery - Twitter Bootstrap 确保缩略图框的高度相等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13643438/