Равные высоты ящиков в одной строке с колонками, которые имеют более одной коробки

Я использую Bootstrap 3.2.0 и библиотеку jQuery-match-height (веб-страницу GitHub), потому что мне нужно иметь одинаковые столбцы высоты.

Я создал простой пример моей проблемы с этой скрипкой.

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

У меня есть 1-, 2- или 3- раскладка столбцов, основанная на ширине окна webbrowser. Строки столбцов 1- и 3- работают очень хорошо, но не раскладка столбцов 2-.

Я также создал картину того, что хотел:

Изображение расположения двух столбцов http://i59.tinypic.com/mt1o4l.png

Вы видите три больших коробки (1, 2 и 3) и три более мелкие (4, 5 и 6) с динамическим контентом и размерами шрифтов.

Проблема заключается в второй строке. Я хочу сделать коробки 4 и 5 (с запасом) выше, чем поле 3, если поле 3 выше, чем оба. Если ящики 4 и 5 находятся вместе выше (с запасом), чем поле 3, оно должно быть растянуто по высоте, поэтому они выравниваются по горизонтали, как показано на моем изображении.

Как я могу это сделать?

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);
 }
});
</dummy2){>

licensed under cc by-sa 3.0 with attribution.