有什么方法可以使一个缩略图与另一个缩略图的高度相同?
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/3.jpg">
<div class="caption">
<h5>Lorem ipsum dolor sit amet</h5>
<a href="#" class="uppercase bold">recipe</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/3.jpg">
<div class="caption">
<h1>how to</h1>
<a href="#" class="uppercase bold">recipe</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/3.jpg">
<div class="caption">
<h5>Lorem ipsum dolor sit amet, consectetur </h5>
<a href="#" class="uppercase bold">recipe</a>
</div>
</div>
</div>
</div>
这段代码的结果是,第二个缩略图高度比第一个和 <a href >
高1到另一个之间的高度不同
像这样https://jsfiddle.net/hbfu2b97/1/
如果将结果屏幕放大,您会看到差异。
最佳答案
您需要创建一个运行 onload 的 javscript 函数,捕获所有缩略图,检查哪个缩略图的高度最高,然后遍历缩略图以为它们分配获得的高度:
@fcalderan 在他的回答中有一个很好的解决方案: https://stackoverflow.com/a/9279339/2611451
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.each(function() { $(this).height(tallest); });
}
$(document).ready(function() {
equalHeight($(".thumbnail"));
});
我已经更新了你的 fiddle :https://jsfiddle.net/hbfu2b97/6/
更新
为了使食谱链接与底部对齐,我将 thumbnail
设置为相对定位,并将食谱链接元素定位为绝对位置并与按钮对齐:
.thumbnail
{
position:relative
}
.caption a
{
position:absolute;
bottom:1px
}
关于jquery - bootstrap3 中的缩略图高度相等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35956464/