Как сделать так, чтобы текст проходил через 2 строки по 2 столбца с помощью css3?

Question

На данный момент у меня есть div, ширина которого составляет 1024 пикселя.

В этом поле находятся два столбца CSS3 с текстом, автоматически перетекающим из одного в другой.

Однако я хочу ограничить высоту этих двух столбцов до 700 пикселей - после того, как они заполнятся, я хочу, чтобы под ними появилось еще 2 столбца с такой же высотой.

Возможно ли это?

Answer 1

Обновление:

Предложение Adobe CSS Regions, упомянутое gimme5, выглядит превосходно.К сожалению, согласно caniuse.com, сейчас, похоже, поддержка браузера очень мала - он был удален из текущих версий Webkit.

Существует более простое предложение, которое может выполнить необходимую работу: многостолбцовый макет CSS(http://www.w3.org/TR/css3-multicol/), который, кажется, имеет более широкую поддержку браузера. Я еще не пробовал его, но он может работать для вас без необходимости загружать тонну Javascript.

Answer 2

OK.Вполне возможно достичь того, что, я думаю, вы собираетесь построить.Однако, если вы хотите сделать это самостоятельно, вам понадобится немного больше, чем просто стили CSS3.Вам также понадобится немало JavaScript.

Взгляните на этот плагин Columnizer jQuery (он может выполнять свою работу)

Вот пример сайта с результатамиего работы: http://welcome.totheinter.net/autocolumn/sample10.html