javascript - 一行中等高的框与具有多个框的列

Question

我正在使用 Bootstrap 3.2.0 和库 jQuery-match-height ( GitHub web page )，因为我需要有等高的列。

我用 this fiddle 创建了一个简单的问题示例.

$(function() {
    $('.bs-grid-big').matchHeight();
    $('.bs-grid-small').matchHeight();
});

我有 1 列、2 列或 3 列布局，具体取决于网络浏览器窗口的宽度。 1 列和 3 列布局工作得很好，但 2 列布局不行。

我还创建了一张我想要的图片:

您会看到三个较大的框(1、2 和 3)和三个较小的框(4、5 和 6)，它们都具有动态内容和字体大小。

问题出在第二行。如果第 3 个框比两个框都高，我想让第 4 个和第 5 个框(有边距)和第 3 个框一样高。如果框 4 和 5 比框 3 高(有边距)，则应拉伸(stretch)高度，以便它们水平对齐，如我的图像所示。

我该怎么做？

Answer 1

给你，不需要使用插件=> http://jsfiddle.net/d8w2n/3/

$(function() {
    var dummy1=$('.bs-grid-big').eq(0).height();
    var dummy2=$('.bs-grid-big').eq(1).height();
    var dummy3=$('.bs-grid-big').eq(2).height();
    var dummy4=$('.bs-grid-small').eq(0).height();
    var dummy5=$('.bs-grid-small').eq(1).height();
    var dummy6=$('.bs-grid-small').eq(2).height();
    if(dummy1>dummy2){
    $('.bs-grid-big').eq(1).height(dummy1);
    }
    else if(dummy1<dummy2){
    $('.bs-grid-big').eq(0).height(dummy2);
    }
    if(dummy3>(dummy4+dummy5)+40){
    var dummy3Height= dummy3 -40;
        dummy3Height=dummy3Height/2;
        $('.bs-grid-small').eq(0).height(dummy3Height);
        $('.bs-grid-small').eq(1).height(dummy3Height);
    }
    else if(dummy3<(dummy4+5)+40){
    var dummy3Height=(dummy4+dummy5)+40;
        $('.bs-grid-big').eq(2).height(dummy3Height);
    }
});