1

Нужна помощь. Начал работать с фронтендом. Навыков нету, а роботу сделать нужно. Помогите, пожалуйста.

Нужно разместить дивы по горизонтали и по вертикали, но чтобы отсупы по вертикали были по отношению к диву сверху (так, как показано на рисунке):

alt text

1

1 ответ 1

2

Способов насчитал 3, из которых на данный момент приемлемы 2, рассказываю в порядке приоритетности (первый - самый приоритетный):

1) "Шаблонизировать" код на сервере таким образом, чтобы формировались три колонки. И далее сложить это всё в три блока: на выходе получаем такую разметку: http://jsfiddle.net/81L46xbd/4/

2) Применить JavaScript: если шаблон править возможности\желания нет: применяем яваскрипт, блоки можно выводить "скопом" и не задумываться: http://jsfiddle.net/81L46xbd/2/

Код примерно такой:

var customBox = function(_class,columns){
    _class = _class || '.bricks';
    columns = columns || 3;
    var $box = $(_class);
    var $target = $box.find('.brick');
    var cur = 0;
    for(var i=0;i<columns;i++){
        $box.append('<div class="column"></div>');
    };
    var $cols = $box.find('.column');
    $.each($target,function(i,e){
        var $element = $(e);
        if (cur == columns) { cur=0; }
        $element.prependTo($cols.eq(cur));
        cur++;

    });
};

customBox();

3) Использовать крутое CCS свойство: column-count: http://jsfiddle.net/81L46xbd/6/ Плюсы данного подхода: простота. Минусы внятно работает только в webkit, в опере, фф, ие либо не работает, либо может переносить блок по частям, тем самым делить контент.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.