Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Многоколонная верстка в CSS3

.

Многоколонная верстка в CSS3

При слове «газета» мы сразу представляем себе большую страницу, па которой плотно размещены узкие полоски текста. Это не случайно: газеты разбивают статьи на множество колонок, потому что слишком длинные строки было бы трудно читать. Окно браузера может быть шире, чем печатная книга, и даже шире, чем некоторые газеты, поэтому нет ничего удивительного в том, что создатели CSS решили обеспечить нас инструментарием для многоколонной верстки.

Возможно, вы полагаете, что эффект многоколонной верстки почти всегда можно имитировать с помощью свойства float. Проблема в том, что поведение элементов с этим свойством сильно зависит от окружения. Колонки в газетном стиле почти невозможно организовать средствами CSS и HTML, не вставив принудительно разрывы колонок в определенных местах.

В самом деле, вы можете разбить статью на несколько разделов (div), причем каждый из них будет «плавать» рядом с другими, создавая иллюзию многоколонной верстки. Но что если у вас динамический контент? Ваше программное обеспечение должно будет определить, где каждая колонка должна заканчиваться и начинаться, чтобы вставить требуемые теги отделения.

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

Пока все наши возможности по многоколонной верстке ограничены тем, что мы можем задать разбиение текста на колонки, причем мы можем управлять их шириной и полями между ними. По мере расширения поддержки со стороны браузеров у нас появится возможность прерывать колонки, создавать элементы, перекрывающие несколько колонок и т. д. Браузеры по-разному поддерживают многоколонную верстку: Firefox и WebKit давно ее поддерживают (с префиксами вендоров), Opera только с версии 11.10 ввела поддержку многоколонной верстки (без префиксов), а в IE колонки не поддерживаются.

Почти весь контент главной страницы HTML5 Herald разбит на колонки. Давайте глубже копнем в свойства CSS3, позволяющие создать этот эффект, и попробуем воспроизвести его на нашем сайте.

.

Читайте так же:
Not found