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

只需添加 min-height 即可

<强> FIDDLE

.alert{
    min-height:150px;
}

希望我理解你

Answer 2

所以这是一个使用jQuery的示例，它查找所有行，然后定位必须匹配每行内部大小的列。我将行和列作为参数传入它应该意味着如果你改变你的结构，你可以用你正在使用的类名更新调用。

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');

小提琴：http://jsfiddle.net/leighking2/rk4t6c45/

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

Answer 3

您需要添加＆＃34;提醒＆＃34; class和span-6类，因为span-6类是给出视觉信息的类，你可以设置min-height for alert

Answer 4

这是一个纯粹的JS解决方案，用于均衡匹配元素的高度。它也适用于调整大小。

function setHeights(){
    //get all the elements that need to be equal height:
    var elements = document.getElementsByClassName('alert');
    //call the equaliseHeights prototype method
    elements.equaliseHeights();
}

/* Extend the HTMLCollection prototype */
HTMLCollection.prototype.equaliseHeights = function() {
    var maxHeight=0;
    //loop through the collection to find the height of the tallest element:
    for (var i = 0; i < this.length; i++) {         
        this[i].style.minHeight = 0; //reset min-height     
        var thisHeight = this[i].offsetHeight; //measure height
        maxHeight = (thisHeight>maxHeight)?thisHeight:maxHeight; //store the greatest height
    }
    //now set the min-height for all:
    for (var i = 0; i < this.length; i++) {        
        this[i].style.minHeight = maxHeight+"px"; //set min-height
    }
    return this;
};

/* on load */
(function waitForReady(){
    if (document.readyState === "complete") {

        setHeights();//on load, call method
        window.onresize = setHeights;//on resize, call method

    } else {
        setTimeout(waitForReady,10);
    }
})();

http://jsfiddle.net/r5ye65vz/5/

强制两个排液相同尺寸

4 个答案: