javascript - 强制两个行流体大小相同

Question

我一直在为一个问题而苦苦挣扎，却不知道如何解决它:

我做了一个 FIDDLE :

HTML:

        <div class="row-fluid">

            <div class="span6">
                <div class="alert alert-info">
                    this has text <br>
                    this has text <br>


                </div>
            </div>
            <div class="span6">
                <div class="alert alert-success">
                    <div class="media">
                        This needs to be same size as the other box.<br />
                        This needs to be same size as the other box.<br />  
                        This needs to be same size as the other box.<br />
                        This needs to be same size as the other box.<br />
                        This needs to be same size as the other box.<br />
                        This needs to be same size as the other box.

                    </div>
                </div>
            </div>
        </div>
    </div>   
</body>

无论框中是否有文本，我都希望两个框的大小相同。我试过添加一些 javascript，但我还没有弄清楚如何去做。

Answer 1

这里是一个使用 jQuery 的示例，它会查找您的所有行，然后以每行内必须匹配大小的列为目标。我将 row 和 col 作为参数传入，这意味着如果您更改结构，您只需使用您正在使用的类名更新调用即可。

var updateHeights = function (rowTarget, colTarget) {

    $(rowTarget).each(function () {
        var maxHeight = 0;
        $(colTarget, this).each(function () {
            if (maxHeight <$(this).height()) {
                maxHeight = $(this).height();
            }
        });

        $(colTarget, this).each(function () {
            $(this).height(maxHeight);
        });
    });

};

updateHeights('.row-fluid','.alert');

fiddle :http://jsfiddle.net/leighking2/rk4t6c45/

我不喜欢它的一件事是它循环两次，一次是为了找到最大的高度，然后再次设置它。