Question

我想要3张相同高度的缩略图。如果我首先加载网站，缩略图对于图片来说太小，而文本在下一行缩略图后面。按钮在图片中，如果我重新加载网站，他们都在相同的高度和对齐。为什么？

HTML：

    <div class="row equalheight">
        <div class="col-md-4 artikel">
            <div class="thumbnail">
                <img src="..." alt="">
                <div class="caption">
                    <h3>Head</h3>
                    <p>Text</p><br><br>
                    <p><a href="#" class="btn btn-danger btn-lg button" role="button">Click!</a></p>
                </div>
            </div>
        </div>
        <div class="col-md-4 artikel">
            <div class="thumbnail">
                <img src="..." alt="">
                <div class="caption">
                    <h3>Head</h3>
                    <p>Text</p><br><br>
                    <p><a href="#" class="btn btn-danger btn-lg button" role="button">Click!</a></p>
                </div>
            </div>
        </div>
        <div class="col-md-4 artikel">
            <div class="thumbnail">
                <img src="..." alt="">
                <div class="caption">
                    <h3>Head</h3>
                    <p>Text</p><br><br>
                    <p><a href="#" class="btn btn-danger btn-lg button" role="button">Click!</a></p>
                </div>
            </div>
        </div>

<script src="../../style/js/jQuery.equalheights.min.js"></script>

<script>
    if ($(window).width() > 960) {
        $('.equalheight div').equalHeights();
    }
</script>

CSS：

.button {
position: absolute;
bottom: 15px;
right: 30px;
}
.artikel {
    margin-bottom: 25px;
}

Answer 1

将高度均衡器代码放入$（window）.load（）或$（document）.ready（）块。图像的加载滞后于html的其余部分。在图像完全加载之前，均衡器开始工作。

$(window).load(function(){
    if ($(window).width() > 960) {
     $('.equalheight div').equalHeights();
    }
});

或

$(document).ready(function(){
    if ($(window).width() > 960) {
     $('.equalheight div').equalHeights();
    }
});

Bootstrap缩略图 - JQuery EqualHeight

1 个答案: