Question

我在Bootstrap 3.3.6网站上使用MatchHeight.js插件。

虽然我已经设法在我网站的其他部分成功使用此功能，但我无法在我目前正在工作的页面上使用它。所有源文件都已正确加载，因此我知道它不是缺少库或其他此类问题。

我正在使用的标记旨在输出显示3篇新闻文章的网格。每个内部的图像可以是不同的比例。所以问题是如果图像的高度不同（在这种情况下它们不是），我想使用MatchHeight.js使盒子保持相同的高度。

我的标记是这样的：

<div class="row">
        <div class="col-md-4">
            <div class="thumbnail text-center match-height">
                <img alt="" class="img-responsive" src=
                "image1.jpg">

                <div class="caption">
                   <h4>Quick summary of a question that's been asked</h4>
                   <p class="date">19 January 2017</p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="thumbnail text-center match-height">
                <img alt="" class="img-responsive" src=
                "image2.jpg">

                <div class="caption">
                    <h4>Quick summary of a question that's been asked</h4>
                    <p class="date">19 January 2017</p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="thumbnail text-center match-height">
                <img alt="" class="img-responsive" src=
                "image3.jpg">

                <div class="caption">
                    <h4>Quick summary of a question that's been asked</h4>
                    <p class="date">19 January 2017</p>
                </div>
            </div>
        </div>
    </div>

已将类.match-height添加到这些div中，以便插件将按如下方式应用：

$('.match-height').matchHeight();

但它似乎不起作用。在我网站的其他部分，我已成功使用此方法，虽然没有涉及图像，但框中只包含文字。

无论使用何种图像比例，目标只是拥有相同的高度框。这甚至可能吗？

修改

我提出的解决方案是将.match-height类添加到 img 标记中。看起来不合适，但确实有效。如果有人有更好的解决方案，请告诉我。

Answer 1

你走了。

获取选择div的最高高度并将所有div设置为相同高度的示例。

如果你想用图像做这件事，它就不会那么好用，因为比例会消失。

$(document).ready(function(){
        var array = $(".match-height");
        var height = 0;
        for(i = 0; i < array.length; i++){
            if($(array[i]).height() > height){
                height = $(array[i]).height();
            }
        }
        $(array).height(height);
    });

jquery MatchHeight插件未按预期工作

修改

1 个答案: