Розбивка тексту на колонки за допомогою css3
Отже, є блок з текстом. Що б максимально наблизити завдання до реальності, створимо таку html розмітку:
Весь текст, який потрібно представити у вигляді колонок, обгорнемо в div і застосуємо до нього такі стилі:
Все, наш текст автоматично розбитий на три колонки, розділені вертикальними лініями.
Демо приклад наведеного вище коду
Ермітаж виник в 1764 як приватне зібрання Катерини II, після того як в Берліні через агентів вона придбала у комерсанта І. Горьковського колекцію з 220 творів голландських і фламандських художників. Спочатку більшість картин розміщувалося у відокремлених апартаментах палацу, що отримали французька назва «Ермітаж» (місце усамітнення).
У 1769 році в Дрездені для Ермітажу була придбана багата колекція саксонського міністра графа Брюля, що налічувала близько 600 картин, в тому числі пейзаж Тиціана «Втеча в Єгипет», види Дрездена і Пірна кисті Беллотто тощо.
Найважливішу роль для Ермітажу зіграла покупка Катериною в Парижі колекції живопису барона Кроза в 1772. Це зібрання багато в чому визначило «обличчя» картинної галереї. Переважали картини італійських, французьких, фламандських і голландських майстрів XVI-XVIII століття. У їх числі - «Святе Сімейство» Рафаеля, «Юдиф» Джорджоне, «Даная» Тиціана, картини Рембрандта, твори Рубенса, Ван Дейка, Пуссена, пейзажі Клода Лоррена і роботи Ватто.
Іноді потрібно отримати колонки строго певної ширини. В цьому випадку слід використовувати властивість column-width замість властивості column-count.
Тепер і шедеври розробок від Microsoft відображають текст так, як нам потрібно.
Можливі проблеми:
- - якщо потрібно розташувати, наприклад, списки, або певні абзаци в суворо визначених колонках, то описаним вище способом це зробити не вийде (принаймні на сьогоднішній день рішення даного завдання мені знайти не вдалося);
- - при підключенні до Joomla 1.7 скрипт для IE у мене не заробив. Ослики продовжують показувати текст у всю ширину колонки. Причина такої поведінки поки залишається невідомою.
Як альтернатива цим варіантом, можна скористатися методом розбивки на колонки за допомогою jQuery