Управление вертикальным выравниванием обернутых блоков inline-block или float

Question

Пожалуйста, посмотрите на эту js fiddle , которая иллюстрирует мою проблему.
Растяните окно «Результат» влево и просмотрите вертикальные промежутки между верхней строкой «grid3» и нижней.

Цель состоит в том, чтобы не было вертикальных пробелов между делениями, что когда-либо. Все DIV должны придерживаться вершины div над ними. (Вот почему этот «сеточный» макет был опробован в первую очередь, но, как вы можете видеть, он не решает проблему на 100%).

Условия :

1. Каждый div имеет фиксированную ширину, но неизвестную произвольную высоту.
2. Ширина DIV контейнера не обязательно должна быть 'auto', но она предпочтительна. Это по-прежнему также происходит , когда задается фиксированная ширина.
3. Все DIV должны быть выровнены по горизонтали влево.
4. Если все еще использовать этот «сеточный подход», число делений внутри каждой «сетки» должно быть конечным.

Та же проблема возникает и при использовании плавающих (float: left) div вместо
см .: http://jsfiddle.net/pQkcd/3/ (растянуть окно результатов влево).

Спасибо.

Answer 1

Использование (плавающего влево) контейнера для каждого столбца не вариант?

Answer 2

Я разобрался с этим изящным решением JQuery, которое может работать с контейнером неизвестной ширины (ширина: авто).Это работает с DIV, имеющими «float: left» и «position: родственник».Я называю каждый из этих DIV «панелью» (у каждого также будет свой класс «панели»).

Хитрость заключается в том, чтобы выяснить, сколько панелей имеется в каждом ряду (неЯ не знаю этого заранее, так как ширина контейнера сначала неизвестна).Вы можете выяснить количество панелей в ряду, отслеживая первое изменение в позиции (). Top.Панели в первом ряду должны начинаться сверху: 0.Как только вы узнаете, сколько панелей в строке - вы можете перенастроить панели в первых рядах в соответствии с положением каждой панели непосредственно над ней, а также вы можете и должны установить для первой панели каждой новой строки значение «clear: left».

Это необходимо выполнить после того, как панели уже находятся в DOM.Вы также можете прикрепить его кСобытие $ (window) .resize - чтобы перенастроить панели при изменении размера контейнера.

function fixPanelsPosition() {
    var panelsPassedInRow = 0;
    var panelsPerRow = 0;
    var $panelAbove;
    var newTop;
    var ptop;
    $('.panel').each(function (i) {
        // reset css (because this will be called on window resize as well...)
        $(this).css('top','').css('clear','');
        panelsPassedInRow++;
        ptop = $(this).position().top;
        //Figure out number of panels per row:
        if (ptop == 0) { panelsPerRow++; }
        // new row
        if (panelsPassedInRow > panelsPerRow) {
            //First panel in each row should have 'clear:left':
            $(this).css('clear','left');
            panelsPassedInRow = 1;
        }
        // If not in first row - bump panel up:
        if (ptop > 0) {
            $panelAbove = $('.panel').eq(i-panelsPerRow);
            newTop = $panelAbove.position().top + $panelAbove.height();
           /*  Bump the panel up by setting its 'top' value to a negative value.
            *  If you have margin-top/margin-bottom on the panels you should add that 
            *  value to the calculation:
            */
            $(this).css('top',-($(this).position().top-newTop));
        }
    });
}