Как можно сделать колонки
Сначала давайте просто рассмотрим несколько способов, которыми можно сделать колонки, а потом уже разберем пару примеров.
С помощью плавающих блоков. Сегодня это самый популярный способ сделать колонки, хотя потихоньку его начинает теснить флексбокс. По умолчанию два блока в нормальном потоке не могут стоять на одной строке, но это поведение можно легко изменить, прописав обоим свойство float: left | right. Они начнут прижиматься к левому или правому краю. Чтобы идущий за ними блок воспринял плавающие блоки и разместился правильно, ему нужно прописать clear: both.
С помощью флоатов чаще всего делают 2 или 3 колонки. Верстка сайта с плавающими блоками не очень сложна, нужно знать всего лишь некоторые нюансы их поведения. Например, если вам нужно сделать область для вывода статей, а справа – боковую колонку с меню, то плавающие блоки очень легко реализуют такое расположение.
С помощью таблиц. Таблицы вообще были созданы для вывода большого количества ячеек и столбцов, поэтому сделать в них колонки проще простого. В таблице может быть хоть 20 колонок. Вся ее структура задается в html-коде, поэтому код получается достаточно громоздким.
Поскольку ячейкам в таблице можно задавать любые размеры, раньше с их помощью верстали почти все сайты. Например, для реализации простейшего макета (шапка, контент, сайдбар, футер), в таблице делали три строки (строка таблицы формируется тегом tr). Каждая строка содержит две ячейки, потому что контент и сайдбар должны располагаться отдельно друг от друга. А в шапке и футере эти ячейки просто соединяли с помощью атрибута colspan у тега td, если это было необходимо.
У ячеек можно легко убрать рамку, что позволяло веб-разработчикам верстать сложные по структуре шаблоны достаточно легко.
С помощью флексбокса. Это современная технология, которая начала распространяться в 2014 году, хотя существовала и до этого. Ее суть заключается в следующем: создается один общий блок контейнер, в который помещаются другие блоки, которые нужно будет сделать в виде колонок, потом этому контейнеру нужно прописать display: flex.
Далее обычно задается свойство flex-direction, которое определяет направление главной оси, по которой будут расположены блоки. В качестве значений можно задать: row и column. Первое значение направит блоки по горизонтали справа налево, второе – вниз. Также можно задать реверс: flex-direction: row-reverse. Блоки расположатся справа налево.
Также есть набор отдельных свойств для дочерних блоков флекс-контейнера. В основном эти свойства позволяют задать размер блока и его поведение относительно других элементов.
Преимущества флексбокса в том, что это гораздо более гибкий элемент. Если при блочной верстке веб-разработчикам часто приходилось высчитывать все по пикселям, выставляя правильные отступы, добавляя разнообразные хитрости в код, чтобы все не развалилось, то флекс-элементы легко выстаиваются в колонку, в ряд и вообще требуют гораздо меньшего количества математических вычислений со стороны разработчика.
Разбиение текста на колонки
Тем не менее, я до сих пор не затронул самую главную тему. CSS сегодня предлагает возможность разбить текст в основном блоке без помощи плавающих блоков, таблиц или флексбоксов. То есть в html остается один обычный блок, а текст делится на колонки исключительно благодаря css.
Итак, нижеперечисленные свойства применяются к блоку, в котором текст нужно разбить в несколько колонок.
Column-count – свойство задает количество колонок, на которое нужно разбить текст. Рекомендуется выставлять значение от 2 до 4, в зависимости от того, как вам больше нравится.
Column-width – задает количество символов текста в одной колонке. Я подчеркиваю, ширина колонки в данном случае задается не пикселами, а количеством символов. Оптимально: 30-50 символов в одной колонке. Также это свойство никак нельзя назвать кроссбраузерным, потому что вы выставляете только желаемое количество символов, но поступит ли браузер в согласии с вашими пожеланиями, это еще неизвестно.
Column-gap – определяет промежуток между колонками. Можно задавать в пикселях.
Column-rule – рисует линию, разделяющую колонки. Синтаксис свойства полностью повторяет свойство border. Сначала записывается толщина линии, потом ее тип, а потом цвет.
Также я хотел бы упомянуть, что все эти css-свойства являются относительно новыми. Например, Internet Explorer поддерживает их только с десятой версии. Это свойства из стандарта CSS3, поэтому если вы их собираетесь применять на своем сайте, то нужно позаботиться о кроссбраузерности, иначе в старых версиях оперы и IE никаких колонок не будет.
Примеры
Плавающие блоки. Верстка сайта в две колонки чаще всего делается очень просто с помощью плавающих блоков. В css это реализуется примерно так:
Float-block1{ float: left } .float-block2{ float: left } блок, который должен стоять ниже плавающих{ clear: left | both }
То есть нижнему блоку нужно указать это свойство обязательно, чтобы он правильно разместился. Таким образом, плавающие блоки станут в одну строку, если им хватает ширины в родительском элементе. Естественно, нужно указать также ширину, высоту и рамку у блоков, чтобы получилось как на этом скриншоте:
А теперь сделаем самое интересное. Давайте добавим много случайного текста в основной блок и попробуем отображать его там в три колонки, как в газете или журнале. Для этого в код этому блоку нужно дописать такие правила.
В сегодняшней статье я хочу рассказать о новом способе создания колонок одинаковой высоты с помощью CSS. Не нужно больше использовать Javascript, чтобы высота колонок стала одинаковой для всех. Суть данного метода заключается в использовании нового свойства CSS3, которое дает нам намного больше возможностей, чем просто создание колонок одинаковой высоты. Но в этом уроке мы рассмотрим как легко можно решить эту наболевшую проблему.
Разметка страницы
HTML часть
Определим две колонки, которые в дальнейшем будем делать одинаковой высоты с помощью CSS:
1 2 3 4 5 6 7 8 | id = "page" > <div id = "main" > </ div > |
То есть нам необходимо сделать так, чтобы блок Определим flexbox для основного контейнера, в котором находятся два блока: Отлично! Сейчас осталось задать ширину для центрального блока с основным контентом и для сайдбара: Пояснения: Наша страница близка к завершению. Но когда блок с основным контентом сужается, то страница становится очень длинной. Поэтому при определенной ширине экрана мы можем сделать так, чтобы сайдбар уходил под блок с основным контентом и удобно просматривался на мобильных устройствах: Здесь приведен код без префиксов для того, чтобы он не занимал много места и не смотрелся громоздко. Вы можете полностью рабочий пример с помощью кнопки в начале статьи. Также нужно сказать о том, где работает данный метод. Так как это свойство достаточно новое, то и работает оно в современных браузерах Firefox, Chrome, Safari, Opera и IE 11. Из данной статьи вы узнали как сделать колонки одинаковой высоты на CSS. Но это далеко не все возможности этого CSS свойства. Свойство flex позволяет делать блоки резиновыми, выстраивать элементы автоматически в несколько столбцов или строк, занимая всю свободную область, а также многое другое. Но самое основное, и, главное, часто используемое решение при верстке страниц, мы рассмотрели в данной статье. На этой странице описаны примеры, позволяющие сделать колонки одинаковой высоты
в макетах с блочной версткой. Для многих начинающих верстальщиков это является определенной проблемой, ведь если в колонках макета высота не указана явно, то они вытягиваются ровно настолько, чтобы вместить свое содержимое. Соответственно получается, что вместо одинаковой высоты, каждая колонка в макете имеет свою, что выглядит не очень красиво. Для большей наглядности, во всех примерах используются макеты с прижатым футером
. Поэтому обращаю ваше внимание на то, что некоторые блоки или свойства CSS, которые участвуют в создании колонок одинаковой высоты, уже изначально присутствуют в макетах. То есть в итоге они выполняют двойные функции - и футер к низу прижимают и колонки тянуть. Однако для большего удобства только те свойства, которые тянут колонки, будут снабжаться CSS-комментариями
, причем неважно используются ли они еще для каких-то целей или нет. Этот пример построен на принципе дополнительных псевдоколонок и абсолютного позиционирования. Для этого создается несколько блоков (по количеству колонок), которые растягиваются во всю высоту страницы и подкладываются под настоящие колонки. Для того, чтобы появился эффект колонок одинаковой высоты, этим псевдоколонкам задается необходимый фоновый цвет. Так как в Internet Explorer 6 возникают проблемы с этим способом создания колонок одинаковой высоты, то для него было использовано несколько хаков
: Данный пример самый простой в реализации и заключается в том, что создается небольшое «горизонтальное» изображение, состоящее из нескольких цветов (по количеству колонок), которое затем «размножается» по вертикали, имитируя колонки. К сожалению, способ подходит только для фиксированных макетов, к тому же не стоит забывать, что в браузере с отключенными картинками никаких колонок не будет.
Фоновое изображение, которое использовалось в примере можно увидеть . Именно с помощью него была создана видимость колонок одинаковой высоты. В этом примере используется довольно необычная техника. Сначала всем колонкам задаются очень большие нижние отступы, из-за которых они растягиваются, а потом такие же по размеру, но отрицательные по значению нижние поля. В конце все, что является «лишним» - просто обрезается.
Этот метод кроссбраузерный и его понимают все, включая Internet Explorer 6. А вот совместно со способом, которым прижимался футер, он отказывается корректно работать. Я не стал придумывать очередные «костыли» для этого старичка, а наоборот убрал пару свойств, помогающих ему прижать футер. Поэтому при добавлении в колонки содержимого - в IE6 все тянется, как положено. С появлением великого множества экранов разных размеров и разрешений, стало невероятно непрактично создавать дизайны с фиксированными блоками текста, которые занимают всю ширину экрана. Традиционный подход заключается в разделении текста на две колонки, и часто это реализуется вручную, и требует существенных временных затрат. Либо текст разделяется при помощи javascript, который подходит не для всех ситуаций. Кроме того, у нас ведь должна быть возможность реализовать это при помощи CSS, не прибегая к использованию сеточных систем или плавающих элементов, разве нет? CSS3, на самом деле, предоставляет вам возможность разделить текст на несколько колонок, а также выставить размер канавок (расстояние между колонками), и таким образом, вы можете получить полный контроль над колонками, вместо того, чтобы использовать фреймворк или сеточную систему. Кроме того, CSS3 предоставляет отличные запасные варианты на случай, когда пользователь использует, к примеру, Netscape Navigator – верстка вашего сайта по-прежнему будет выглядеть замечательно. Браузерная поддержка
Важно отметить, что, несмотря на то, что практически все современные браузеры поддерживают множественные колонки на CSS3 (да-да, даже IE10), многие предыдущие браузеры вроде IE9 не предоставляют такой поддержки. Хотя поддержка довольно хорошая, вам, возможно, придется использовать браузерные префиксы для webkit (-webkit-) и mozilla (-moz-). Тем не менее, вам не придется использовать -ms- или -o- для IE и Opera, так как они оснащены либо полной поддержкой, либо частичной. Данное CSS-свойство дает вам довольно много параметров контроля над тем, как ваш контент выводится в окне браузера, и давайте познакомимся с этими параметрами: * column-count
: здесь вы можете указать количество колонок, которое должно быть отображено в элементе. Имея все эти опции, нам не кажется, что понадобится что-то еще для управления колонками. Конечно же, для нормальной работы нескольких колонок нам не обязательно нужны все эти параметры. Более того, в основном, нам нужен лишь параметр column-count, но вы наверняка всегда будете использовать также column-gap, чтобы текст колонки не сливался с ее границами. Чтобы реализовать это на практике, нам понадобится всего пара строк кода: /* This will produce a 3 column layout with a gap of 20px between each column */ /* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */ Cols3 { /*This h1 will take up the space of the 3 columns*/ А сейчас хотим предложить вам завершенный код данного эффекта: Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Переход на создание колонок при помощи CSS, на наш взгляд, дает нам множество преимуществ – нам больше не нужно производить какие-то математические вычисления, создавать плавающие элементы, и не нужно терпеть преломление контента, когда пользователи изменяют размеры окна браузера. Вы также можете создавать код в более семантической манере и, так как данный метод поддерживается всеми современными браузерами, вы можете уже сегодня переходить на него. Стилизуете ли вы колонки при помощи CSS3, или до сих пор используете плавающие элементы и позиционирование? Какие методы вы используете, чтобы обойти проблемы, возникающие в старых браузерах? Поделитесь с нами в комментариях. Влад Мержевич Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом,
как правило, в одной колонке располагается основной материал (текст статьи,
например), а во второй — ссылки на разделы сайта и другая информация. Для создания
подобного макета таблицы достаточно удобны — каждая ячейка выступает в качестве
отдельной колонки, что позволяет легко регулировать различные параметры отображения
документа. Для начала рассмотрим самый простой вариант, когда ширина левой колонки жестко
задана в пикселах, а ширина правой колонки варьируется в зависимости от размеров
окна браузера. Для этого требуется задать общую ширину всей таблицы в процентах
через атрибут width
тега Пример 1. Ширина колонки в пикселах
В данном примере граница у таблицы не отображается, а вертикальное выравнивание
содержимого ячеек по верхнему краю определяется атрибутом valign
со значением top
. Это требуется для того, чтобы
при разном объеме содержимого ячеек, они не сдвигались бы относительно друг
друга, а начинались одинаково от верхнего края. Атрибуты width
и valign
можно заменить стилевыми свойствами width
и vertical-align
с теми же значениями. Тогда данный код будет иметь следующий вид (пример 2). Пример 2. Использование стилей
Расстояние между колонками регулируется атрибутом cellpadding
тега Пример 3. Использование полей
В данном примере значения атрибутов cellspacing
и cellpadding
равны нулю, а расстояние между содержимым
колонок определяется свойством padding-right
,
который добавляется к левой ячейке через идентификатор с именем leftcol
. Аналогично отступы можно регулировать не только справа, но и с других сторон
каждой ячейки. В примере 4 показано, как устанавливать поля для всех ячеек
через стили. Пример 4. Поля в ячейках
Чтобы визуально отделить одну колонку от другой используют разные приемы, самым
распространенным из них, пожалуй, является использование фонового цвета. Лучше
указывать цвет через стили, это позволяет вынести оформление страницы в отдельный
файл. Для этого создаем новый стилевой класс, устанавливаем для него свойство
background
и применяем его к требуемой ячейке (пример 5). Пример 5. Цвет фона
В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 1). Рис. 1. Колонки разного цвета Использование полей не всегда подходит для установки нужного расстояния между
колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу
разных соображений. Тогда поможет добавление еще одной ячейки, которая выступает
в качестве разделителя между колонками (пример 6). Пример 6. Использование трех ячеек
В данном примере вводится еще одна колонка со стилевым идентификатором spacer
,
это позволяет легко менять ширину между колонками. Внутрь этой ячейки можно
ничего не вкладывать, браузеры достаточно корректно работают с подобными ячейками. На рис. 2 показан результат примера. Для наглядности и «красоты» вокруг колонок
добавлена граница. Разделять колонки можно не только с помощью цвета фона и пустого пространства,
но и добавлением линии между колонок. Опять же, здесь пригодятся стили, с помощью
которых создание линий значительно упрощается. Следует только установить свойство
border-left
для правой колонки или border-right
для левой (пример 7). Пример 7. Добавление линии
Результат данного примера показан ниже. Создание колонок с помощью таблиц процесс достаточно простой и быстрый, следует
только добавить таблицу с двумя ячейками и определить ее визуальные атрибуты.
К тому же большинство параметров, определяющих вид таблицы, можно вынести в
стили и таким образом ускорить процесс добавления однотипных таблиц и документов
на их основе. При двухколонном макете применяются разные средства по оформлению колонок.
Например, используется фоновая заливка, добавляется рамка вокруг колонок, изменяется
расстояние между ними или устанавливается вертикальная разделительная линия.
Все эти вещи управляются с помощью стилей, что ведет к сокращению кода, расширяет
варианты модификаций таблиц и удобству разработки сайта.Колонки одинаковой высоты
CSS часть
Вывод
Колонки одинаковой высоты с помощью позиционирования
Описание примера
Колонки одинаковой высоты с помощью фонового изображения
Описание примера
Колонки одинаковой высоты с помощью полей и отступов
Описание примера
Параметры
* column-width
: ширина отдельной колонки. Будьте готовы к тому, что иногда браузеры самостоятельно изменяют это значение.
* column-gap
: ширина бороздки между колонками.
* column-rule-width
: это нечто вроде границ ваших колонок, и здесь вам нужно указать ширину именно границы.
* column-rule-style
: тоже что-то вроде границы, если вам потребуется выставить стиль.
* column-rule-color
: этот параметр нужен для указания цвета.
* column-span
: это значение сообщает браузеру о том, сколько колонок вы хотите объединить – его хорошо использовать для заголовков, и работает оно как colspan и rowspan в таблицах.
.cols3 {
column-count: 3;
column-gap: 20px;
}
Если вы также хотите применить к колонкам правило, то вам нужно будет добавить эти параметры:
.cols3 {
column-count: 3;
column-gap: 20px;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: #000;
}
Как и в широко известном параметре border, вы можете применять цвет, стиль и ширину следующим образом:
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #000;
}
Если у вас есть заголовок, и вам нужно, чтобы этот заголовок простирался на всю ширину всех колонок, то вам нужно добавить следующую строку кода:
.cols3 h1{
column-span: all;
}
Вы можете применить этот метод практически к любому HTML-коду, от отдельного абзаца до нескольких "div"-элементов. Давайте рассмотрим демо:
Integer posuere erat a ante
Завершение
Ширина колонок
и для первой ячейки установить ее ширину в пикселах или процентах также с помощью
атрибута width
, но уже для тега
(пример 1).
Левая колонка Правая колонка
Левая колонка Правая колонка
Поля внутри колонок
. Поскольку cellpadding
определяет расстояние от границы ячейки до края ее содержимого, то пространство
между содержимым разных колонок будет равно удвоенному значению этого параметра.
Используя стили, в частности, свойство padding
,
можно легко регулировать значение отступа для каждой колонки (пример 3).
Левая колонка Правая колонка
Левая колонка
Правая колонка
Цвет фона колонок
Левая колонка
Правая колонка
Разделитель колонок
Левая колонка
Правая колонка
Линия между колонками
Левая колонка Правая колонка
Резюме
Лучшие статьи по теме