Question

我在我的网站上使用jquery-match-height插件。

我无法理解插件在第一行无效的原因。看起来插件正在尝试输出样式高度，但在第一行它是空的。第二行工作正常。

HTML

<div class="container">

    <div class="row article-box-list">
            <div class="col-xs-12 col-md-8 article-box">
                <a href="#"><img src="http://dummyimage.com/768x410/000/fff" alt="" class="img-responsive"></a>

                <div class="well well-white">
                    <h2><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></h2>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <a href="#">More</a></p>
                </div>
            </div>


            <div class="col-xs-12 col-md-4 article-box">
                <a href="#"><img src="http://dummyimage.com/768x853/000/fff" alt="" class="img-responsive"></a>

                <div class="well well-white">
                    <h4><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <a href="#">More</a></p>
                </div>
            </div>
    </div><!-- /first-row-->




    <div class="row article-box-list">

        <div class="col-xs-12 col-md-4 article-box">
            <a href="#" class="img-link"><img src="http://dummyimage.com/768x585/000/fff" alt="" class="img-responsive"></a>

            <div class="well well-white">
                <h4><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h4>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">More</a></p>
            </div>
        </div>



        <div class="col-xs-12 col-md-4 article-box">
            <a href="#" class="img-link"><img src="http://dummyimage.com/768x585/000/fff" alt="" class="img-responsive"></a>

            <div class="well well-white">
                <h4><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h4>
                <p class="ingress">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<a href="#">More</a></p>
            </div>
        </div>


        <div class="col-xs-12 col-md-4 article-box">
            <a href="#" class="img-link"><img src="http://dummyimage.com/768x585/000/fff" alt="" class="img-responsive"></a>

            <div class="well well-white">
                <h4><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h4>
                <p>Lorem ipsum dolor sit amet, consectetuer. <a href="#">More</a></p>
            </div>
        </div>



    </div><!--/ last-row-->


</div>

JS

$(function() {
    $('.article-box .well').matchHeight();
});

~~我的bootply：view~~ （似乎没有工作）

我的jsfiddle：view

任何人都知道如何解决这个问题？

Answer 1

Samus的answer实际上非常接近，但考虑到你想要的是：

匹配每行中.article-box .well元素的高度
每行有不同的匹配高度

插件只是做出承诺的事实：

matchHeight使所有选定元素的高度完全相等

解决方案是分别选择每行中的元素，并将插件分别应用于每个集合，如下所示：

$(function() {
    $('.row').each(function(i, elem) {
        $(elem)
            .find('.article-box .well')   // Only children of this row
            .matchHeight({byRow: false}); // Row detection gets confused so disable it
    });
});

您可以在this更新到您的jsFiddle时看到这一点。您会注意到第一行中的井和第二行中的井是不同的高度，但如果您使用浏览器的开发工具检查它们，则每行内的井相同。

Answer 2

默认选项是按行 - https://github.com/liabru/jquery-match-height#options

$('.article-box .well').matchHeight({ 
     byRow: 0
});

你去吧。：）

Answer 3

尝试使用Minimit中的这个Bootstrap等列高度CSS修复：

http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

您还需要wells上的这个CSS来填充现在相等的高度列：

.well {
    display:inline-block;
    width:100%;
    height:100%;
    margin-top:0;
}

Answer 4

您正在matchHeight()申请.article-box .well，而$(function() { $('.article-box').matchHeight(); });没有任何兄弟姐妹。

应该是

article-box

将一些背景颜色应用于.lvimrc以查看结果。

Answer 5

废弃插件。手动完成：

http://jsfiddle.net/9ru53a28/16/

$(function() {
    $('.row').each(function() {
        var intHeight = 0;
        $(this).find('.well').each(function() {
            if ($(this).outerHeight() > intHeight) {
               intHeight = $(this).outerHeight()
            }
        });
        $(this).find('.well').each(function() {
            $(this).outerHeight(intHeight)
        });
    });
});

Answer 6

我有同样的问题，其中matchHeight似乎无法正常工作，但是经过调试后我意识到我所针对的DIV下的第一个元素有一个负的保证金最高值。 jQuery matchHeight存在负边距值问题。

只需在此处发布，以便对可能在matchHeight中使用负边距值的人有所帮助。

jquery-match-height在第一行没有工作

6 个答案: