JavaScript для перерывов в многоколоночной разметке - PullRequest
Новая
       12

JavaScript для перерывов в многоколоночной разметке

4 голосов
/ 08 июля 2011

Я использую многостолбцовый макет CSS в элементе с фиксированной высотой, поэтому браузер создает столько столбцов, сколько нужно для содержания.Новые столбцы всегда будут появляться справа от других столбцов, но я хотел бы разбить после трех столбцов, и столбцы 4,5,6 появляются ниже 1,2,3.Я думаю, что это можно сделать с помощью JS, но я не знаю, что выбрать.

.columns {
    width: 360px;
    font-size: 100%;
    text-align: justify;
    height: 300px;
    display: block;
    padding-bottom: 30px;
       -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
       -moz-column-width: 100px;
    -webkit-column-width: 1000px;
       -moz-column-gap: 40px;
    -webkit-column-gap: 40px;
}

<div class="columns"><p>Lorem ipsum.../p></div>

1 Ответ

2 голосов
/ 11 июля 2011

Вы можете поместить элемент колонны в контейнер с нужной шириной и переполнением: скрыто.Затем используйте JavaScript для клонирования элемента с колоннами, поместите клон в контейнер (сразу после оригинала) и дайте клону поле margin-left: -100% или относительное позиционирование.

...