С появлением великого множества экранов разных размеров и разрешений, стало невероятно непрактично создавать дизайны с фиксированными блоками текста, которые занимают всю ширину экрана. Традиционный подход заключается в разделении текста на две колонки, и часто это реализуется вручную, и требует существенных временных затрат. Либо текст разделяется при помощи javascript, который подходит не для всех ситуаций. Кроме того, у нас ведь должна быть возможность реализовать это при помощи CSS, не прибегая к использованию сеточных систем или плавающих элементов, разве нет?

CSS3, на самом деле, предоставляет вам возможность разделить текст на несколько колонок, а также выставить размер канавок (расстояние между колонками), и таким образом, вы можете получить полный контроль над колонками, вместо того, чтобы использовать фреймворк или сеточную систему.

Кроме того, CSS3 предоставляет отличные запасные варианты на случай, когда пользователь использует, к примеру, Netscape Navigator – верстка вашего сайта по-прежнему будет выглядеть замечательно.

Браузерная поддержка

Важно отметить, что, несмотря на то, что практически все современные браузеры поддерживают множественные колонки на CSS3 (да-да, даже IE10), многие предыдущие браузеры вроде IE9 не предоставляют такой поддержки. Хотя поддержка довольно хорошая, вам, возможно, придется использовать браузерные префиксы для webkit (-webkit-) и mozilla (-moz-). Тем не менее, вам не придется использовать -ms- или -o- для IE и Opera, так как они оснащены либо полной поддержкой, либо частичной.

Параметры

Данное CSS-свойство дает вам довольно много параметров контроля над тем, как ваш контент выводится в окне браузера, и давайте познакомимся с этими параметрами:

* column-count : здесь вы можете указать количество колонок, которое должно быть отображено в элементе.
* column-width : ширина отдельной колонки. Будьте готовы к тому, что иногда браузеры самостоятельно изменяют это значение.
* column-gap : ширина бороздки между колонками.
* column-rule-width : это нечто вроде границ ваших колонок, и здесь вам нужно указать ширину именно границы.
* column-rule-style : тоже что-то вроде границы, если вам потребуется выставить стиль.
* column-rule-color : этот параметр нужен для указания цвета.
* column-span : это значение сообщает браузеру о том, сколько колонок вы хотите объединить – его хорошо использовать для заголовков, и работает оно как colspan и rowspan в таблицах.

Имея все эти опции, нам не кажется, что понадобится что-то еще для управления колонками. Конечно же, для нормальной работы нескольких колонок нам не обязательно нужны все эти параметры. Более того, в основном, нам нужен лишь параметр column-count, но вы наверняка всегда будете использовать также column-gap, чтобы текст колонки не сливался с ее границами.

Чтобы реализовать это на практике, нам понадобится всего пара строк кода:

/* This will produce a 3 column layout with a gap of 20px between each column */
.cols3 {
column-count: 3;
column-gap: 20px;
}
Если вы также хотите применить к колонкам правило, то вам нужно будет добавить эти параметры:

/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */
.cols3 {
column-count: 3;
column-gap: 20px;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: #000;
}
Как и в широко известном параметре border, вы можете применять цвет, стиль и ширину следующим образом:

Cols3 {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #000;
}
Если у вас есть заголовок, и вам нужно, чтобы этот заголовок простирался на всю ширину всех колонок, то вам нужно добавить следующую строку кода:

/*This h1 will take up the space of the 3 columns*/
.cols3 h1{
column-span: all;
}
Вы можете применить этот метод практически к любому HTML-коду, от отдельного абзаца до нескольких "div"-элементов. Давайте рассмотрим демо:

А сейчас хотим предложить вам завершенный код данного эффекта:

Завершение

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

Стилизуете ли вы колонки при помощи CSS3, или до сих пор используете плавающие элементы и позиционирование? Какие методы вы используете, чтобы обойти проблемы, возникающие в старых браузерах? Поделитесь с нами в комментариях.

В продолжение своего топика Новое в CSS3: многоколоночность, flexbox, сеточная разметка предлагаю вам перевод статьи с более глубоким погружением в свойство многоколоночности с простыми и наглядными примерами.

Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще. На веб-страницах до недавнего времени отобразить контент таким образом было проблемой, доходило до того, что верстальщик разделял текст на несколько div"ов. Но все может стать намного проще с CSS3 Multi Column Module.

Создание контента, разбитого на несколько колонок

Используем HTML5-тег article :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae consequat augue. //и т.д.

Разбиваем текст на две колонки:

Article { -webkit-column-count:2; -moz-column-count:2; column-count:2; }

При помощи свойства column-width можно задать колонкам необходимую ширину:

Article { -moz-column-width: 150px; -webkit-column-width: 150px; column-width: 150px; }

Интервал между колонками

Интервал задается свойством column-gap в px или em, и не может быть отрицательным:

Article { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; }

Разделитель колонок

Свойство column-rule позволяет добавлять разделитель между колонками, принцип работы схож с border .

Article { -moz-column-rule: 1px dotted #ccc; -webkit-column-rule: 1px dotted #ccc; column-rule: 1px dotted #ccc; }

Объединение колонок

Свойство column-span работает аналогично с colspan в table , объединяя нужные колонки.

Article h1 { -webkit-column-span: all; column-span:all; }

Итог

Благодаря CSS3 Multi Column Module можно очень просто и быстро разбивать тексты на удобочитаемые колонки. Список поддерживаемых браузеров уже достаточен, чтобы примерять мультиколоночность на рабочих проектах. Для устаревших браузеров можно применять специальную

Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS.

Также пропустим ту часть, где я рассказываю, что у меня была мечта создать идеальный шаблон с 100 % адаптацией и кроссбраузерностью.

На просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код.

Наша цель - сделать трехколоночный сайт, блоки которого будут:

1. Уменьшаться в зависимости от размера экрана (т.е. не будут уходить вниз);
2. Растягиваться по всей ширине экрана (обычно это 2-х колоночный сайт);
3. Адаптироваться при уменьшении заданных размеров.

Итак, приступим. Для того, чтобы сделать горизонтальные 3 колонки, мы будем использовать свойство display: inline-block . Да-да, свойство float уже не так актуально, но оно нам все же понадобится.

Прежде чем задать им свойства, создадим 3 блока, обернув их в классы main и inline :

Результат:

Размер окна больше 900px

Размер окна меньше 900px

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

Для того, чтобы растянуть дизайн на всю ширину экрана, достаточно удалить свойство max-width:700px в классе main.

Чтобы дизайн полностью не уменьшался при малых размерах окна, а адаптировался, добавляем в стили @media запрос:

/* Простой пример @media запроса*/ @media (max-width:600px) { .inline div { display:block; /* Делаем блоки “Блочными”, т.е. друг под другом */ width:100%; /* Задаем на всю ширину экрана */ height:100px; } }

Более подробно можно посмотреть на JS Fiddle -  приветствуется любое изменение кода в лучшую его сторону.

За материал выражаем благодарность нашему подписчику,

Влад Мержевич

Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом, как правило, в одной колонке располагается основной материал (текст статьи, например), а во второй — ссылки на разделы сайта и другая информация. Для создания подобного макета таблицы достаточно удобны — каждая ячейка выступает в качестве отдельной колонки, что позволяет легко регулировать различные параметры отображения документа.

Ширина колонок

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

и для первой ячейки установить ее ширину в пикселах или процентах также с помощью атрибута width , но уже для тега

(пример 1). Пример 1. Ширина колонки в пикселах Левая колонка Правая колонка В данном примере граница у таблицы не отображается, а вертикальное выравнивание содержимого ячеек по верхнему краю определяется атрибутом valign со значением top . Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались бы относительно друг друга, а начинались одинаково от верхнего края. Атрибуты width и valign можно заменить стилевыми свойствами width и vertical-align с теми же значениями. Тогда данный код будет иметь следующий вид (пример 2). Пример 2. Использование стилей Левая колонка Правая колонка Поля внутри колонок Расстояние между колонками регулируется атрибутом cellpadding тега . Поскольку cellpadding определяет расстояние от границы ячейки до края ее содержимого, то пространство между содержимым разных колонок будет равно удвоенному значению этого параметра. Используя стили, в частности, свойство padding , можно легко регулировать значение отступа для каждой колонки (пример 3). Пример 3. Использование полей Левая колонка Правая колонка В данном примере значения атрибутов cellspacing и cellpadding равны нулю, а расстояние между содержимым колонок определяется свойством padding-right , который добавляется к левой ячейке через идентификатор с именем leftcol . Аналогично отступы можно регулировать не только справа, но и с других сторон каждой ячейки. В примере 4 показано, как устанавливать поля для всех ячеек через стили. Пример 4. Поля в ячейках Левая колонка Правая колонка Цвет фона колонок Чтобы визуально отделить одну колонку от другой используют разные приемы, самым распространенным из них, пожалуй, является использование фонового цвета. Лучше указывать цвет через стили, это позволяет вынести оформление страницы в отдельный файл. Для этого создаем новый стилевой класс, устанавливаем для него свойство background и применяем его к требуемой ячейке (пример 5). Пример 5. Цвет фона Левая колонка Правая колонка В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 1). Рис. 1. Колонки разного цвета Разделитель колонок Использование полей не всегда подходит для установки нужного расстояния между колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу разных соображений. Тогда поможет добавление еще одной ячейки, которая выступает в качестве разделителя между колонками (пример 6). Пример 6. Использование трех ячеек Левая колонка Правая колонка В данном примере вводится еще одна колонка со стилевым идентификатором spacer , это позволяет легко менять ширину между колонками. Внутрь этой ячейки можно ничего не вкладывать, браузеры достаточно корректно работают с подобными ячейками. На рис. 2 показан результат примера. Для наглядности и «красоты» вокруг колонок добавлена граница. Линия между колонками Разделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Опять же, здесь пригодятся стили, с помощью которых создание линий значительно упрощается. Следует только установить свойство border-left для правой колонки или border-right для левой (пример 7). Пример 7. Добавление линии Левая колонка Правая колонка Результат данного примера показан ниже. Резюме Создание колонок с помощью таблиц процесс достаточно простой и быстрый, следует только добавить таблицу с двумя ячейками и определить ее визуальные атрибуты. К тому же большинство параметров, определяющих вид таблицы, можно вынести в стили и таким образом ускорить процесс добавления однотипных таблиц и документов на их основе. При двухколонном макете применяются разные средства по оформлению колонок. Например, используется фоновая заливка, добавляется рамка вокруг колонок, изменяется расстояние между ними или устанавливается вертикальная разделительная линия. Все эти вещи управляются с помощью стилей, что ведет к сокращению кода, расширяет варианты модификаций таблиц и удобству разработки сайта. В продолжение своего топика предлагаю вам перевод статьи с более глубоким погружением в свойство многоколоночности с простыми и наглядными примерами. Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще. На веб-страницах до недавнего времени отобразить контент таким образом было проблемой, доходило до того, что верстальщик разделял текст на несколько div"ов. Но все может стать намного проще с CSS3 Multi Column Module. Создание контента, разбитого на несколько колонок Используем HTML5-тег article : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae consequat augue. //и т.д. Разбиваем текст на две колонки: Article { -webkit-column-count:2; -moz-column-count:2; column-count:2; } При помощи свойства column-width можно задать колонкам необходимую ширину: Article { -moz-column-width: 150px; -webkit-column-width: 150px; column-width: 150px; } Интервал между колонками Интервал задается свойством column-gap в px или em, и не может быть отрицательным: Article { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } Разделитель колонок Свойство column-rule позволяет добавлять разделитель между колонками, принцип работы схож с border . Article { -moz-column-rule: 1px dotted #ccc; -webkit-column-rule: 1px dotted #ccc; column-rule: 1px dotted #ccc; } Объединение колонок Свойство column-span работает аналогично с colspan в table , объединяя нужные колонки. Article h1 { -webkit-column-span: all; column-span:all; } Итог Благодаря CSS3 Multi Column Module можно очень просто и быстро разбивать тексты на удобочитаемые колонки. Список поддерживаемых браузеров уже достаточен, чтобы примерять мультиколоночность на рабочих проектах. Для устаревших браузеров можно применять специальную Статьи по теме Как продлить временную регистрацию по месту пребывания Можно ли заменить права не по месту регистрации Лучшие программы для резервного копирования Финансы в Excel Добавление отсутствующих надстроек в программу microsoft excel Создание отчета "Выручка мастеров" Нужна ли защитная пленка на планшет? Атрибуты chkdsk. CHKDSK - что это? Служебная программа CHKDSK. CHKDSK - как запустить Последние статьи 2024-04-21 01:43:53 Почему Водафон идет по стопам МТС и вводит региональность? 2024-04-19 01:45:08 Антивирус Bitdefender: эффективный защитник Без вопросов 2024-04-18 01:41:53 Значение слова неудачный Популярные статьи Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7 Делаем бэкап прошивки на андроиде Как настроить файл подкачки? Установка режима совместимости в Windows Резервное копирование и восстановление драйверов Windows Выбор редакции 2024-04-13 02:01:28 Как на «Билайне» перейти на другой тариф: все способы У абонентов мобильного оператора МТС из-за обилия очень заманчивых предложений своего оператора нередко возникает вопрос, как перейти на другой тариф... 2024-04-13 02:01:28 Смартфоны Meizu Очень приятная Flyme Meizu / Мейзу - один из ведущих китайских производителей смартфонов. Модели Мейзу неизменно входят в число самых продаваемых андроид-смартфонов в... 2024-04-13 02:01:28 Как быстро узнать баланс на всех устройствах с сим картой мегафон Ведь в первом случае абоненту будет возможно выполнять дополнительные действия, такие как перевод денег, другому абоненту, или начисляться пакеты... 2024-04-12 01:45:27 Бесплатные программы для Windows скачать бесплатно Обзор программы Dr.Web Dr. Web CureIt - бесплатная антивирусная утилита для лечения/удаления инфицированных объектов на персональном компьютере.... 2024-04-12 01:45:27 Как удалить аваст с компьютера если он не удаляется Результатом интернет-серфинга, а также обмена данных со съемными носителями информации нередко является заражение техники вирусами.... rzdoro.ru Программы Microsoft Office Интернет Linux Безопасность Развлечения 1C Предприятие Сеть Новичкам Разное Гаджеты Windows 7