Question

我正在使用Bootstrap 3.2.0和库jQuery-match-height（GitHub web page），因为我需要有相同的高度列。

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

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

我根据webbrowser窗口的宽度进行了1,2或3列布局。 1-和3-列布局工作得很好，但不是2列布局。

我还创建了一张我想要的照片：

Image of 2 column layout http://i59.tinypic.com/mt1o4l.png

你会看到三个较大的盒子（1,2和3）和三个较小的盒子（4,5和6），它们都具有动态内容和字体大小。

问题是第二行。如果方框3高于两者，我想将方框4和方框5（有边距）设置为方框3。如果方框4和方框5比方框3高（有边距），它应该在高度上拉伸，以便它们水平对齐，如我的图像所示。

我该怎么做？

Answer 1

这里你去，不需要使用插件=＆gt; 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);
    }
});

一行中箱子的高度相等，列数多于一个箱子

1 个答案: