Главная › Интернет › Адаптивная верстка. Текст в два столбца. Использование свойства float для создания двух колонок. Линия между колонками

Адаптивная верстка. Текст в два столбца. Использование свойства float для создания двух колонок. Линия между колонками

Сегодня мы рассмотрим очень простой элемент адаптивной верстки, такой, как текст в два столбца. Поняв смысл, вы сможете делать и три и четыре столбца, которые, достигая заданной минимальной ширины уходят вниз. Естественно, к тексту можно добавлять картинки, да и абсолютно любые элементы дизайна.
Естественно, в столбцы или колонки, можно добавлять не только текст, но и любой другой контент. Еще такую адаптивную верстку блоков называют плавающей. Из-за чего? Читайте дальше и все поймете.
Приведенные ниже примеры текста в два столбца растягиваются на всю ширину контейнера. В моем случае это примерная область контента в блогах WordPress.

Текст в два столбца из редактора WordPress

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

Адаптивная верстка. Текст в два столбца без картинок

Можно добавить кнопку в редактор

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

Ну и давайте разберемся по очень простому коду адаптивной верстки двух столбцов.
Вот привожу исходник HTML текста в двух столбцах:

Text, Text, Text,

div class="left-col" - левая колонка с классом.left-col

div class="right-col" - правая колонка с классом.right-col

div class="clearfix" - специальный блок для отмены float . См. далее.

CSS код адаптивной верстки текста в два столбца :

Left-col, /* левая колонка */ .right-col/* правая колонка */ { width: 50%; /* ширина */ min-width: 180px; /* минимальная ширина сужения */ height: auto; /* высота */ box-sizing: border-box; float: left; /* плавающие блоки */ } .left-col{ padding-right: 10px; /* отступ справа */ } .right-col{ padding-left: 10px; /* отступ слева */ }
/*Cтили для маленьких мониторов*/ @media (max-width: 479px){ .left-col, /* левая колонка */ .right-col/* правая колонка */ { width: 100%; /* ширина */ } .right-col{ padding-left: 0px; /* отступ слева */ } } /* clearfix сбрасывает float*/ .clearfix:after { content: " "; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

Left-col и.right-col задается ширина не фиксированная, а в процентах - width: 50%; относительная для того, чтобы столбцы растягивались относительно ширины контейнера.

Но, при достижении 180px , каждый столбец больше не уменьшается.
min-width: 180px; - задан минимальный размер колонок.

Естественно, эти размеры можно менять по своему усмотрению. Три столбца, значит ставьте width: 33.3333%; .

height: auto; - высота адаптивных столбцов, она автоматически меняется в зависимости от объема контента в столбцах.

box-sizing: border-box; - желательно прописывать при адаптивной верстке. Свойство, при котором все отступы padding , рамки border и т.д, вписываются в заданный размер контейнера. В нашем случае.left-col и.right-col .

float: left; - свойство, при котором столбцы с текстом выстраиваются горизонтально по очереди. Количество столбцов зависит от заданных ранее относительных размеров. У нас width: 50%; - два столбца.

@media (max-width: 479px) - так называемая точка прерывания. Это значит, что на мониторах, менее 479px каждый столбец растянется на всю ширину монитора. В коде задано:

Left-col и.right-col {width: 100%;}

Точки прерывания

Используя точки прерывания можно с легкостью управлять размерами элементов для разных мониторов.

@media(max-width: 479px){ } @media(max-width: 767px){ } @media(max-width: 991px){ } @media(max-width: 1199px){ } @media(min-width: 480px){ } @media(min-width: 768px){ } @media(min-width: 992px){ } @media(min-width: 1200px){ }

Сложно? Только на первый взгляд. Скачайте исходник и меняя параметры, посмотрите логику. Ну или просто скопируйте код исходника и замените текст на свой.

Адаптивная верстка. Текст в два столбца с картинками

Естественно, в адаптивные столбцы можно добавлять любые элементы. Рассмотрим пример добавления к адаптивным столбцам с текстом картинки.

Для начала сделаем сами картинки адаптивными. Для этого присвоим им какой-то класс и зададим ширину 100%.
Стили CSS для адаптивных картинок

/*Стили для адаптивных картинок*/ .img-responsive{ display: block; max-width: 100%; /* ширина, размеры в процентах*/ height: auto; margin: 20px 0px; /* отступы сверху и снизу */ background: #fff; /* для красоты цвет заполнения */ padding: 4px; /* для красоты внутренние отступы */ border: 1px solid #ddd; /* для красоты рамка серым цветом */ }

Картинки желательно подбирать 500px в ширину, что-бы на маленьких мониторах они растягивались на всю ширину экрана и выглядели красиво.
HTML разметка для адаптивных столбцов с картинками:

.............

...........

Начинающие веб-мастеры довольно часто встречаются с проблемой расположения информации в один ряд. Будь то картинка слева и текст, расположенный справа, или два текстовых блока, представленных в виде колонок.

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

Наиболее удачным способом разметки дизайна страницы в языке html является таблица. Помимо своей основной функции таблица позволяет очень удачно служить "каркасом" дизайна сайта.

В нашем случае, мы будем использовать таблицу для создания колонок с текстом.

Расположение двух таблиц в одной строке.

Для начала, давайте создадим таблицу, состоящую из двух столбцов со значением ширины рамки, равной 0 пикселов (border="0" ).
Для тега (тег столбца таблицы) указываем атрибут valign со значением "top", отвечающий за то, чтобы информация располагалась с верхнего края таблицы.

Вот, примерно, какой html-код вы должны были получить:

В каждой ячейке (между тегами ) нашей таблицы создаем ещё одну таблицу, но c шириной рамки, равной 1 пиксель, и с одним столбцом.
Посмотрите, какая таблица должна получиться у вас:

Атрибут "cellspace" в основной таблице равен 2.

Привожу весь html-код, разработанный нами в данный момент:

Видите, ничего сложного. А главное - код читается во всех браузерах.

Колонки с текстом.

На основе этого мы можем с Вами создать колонки с текстом.

Для этого в полученных нами таблицах меняем параметр "border" тега

.
Во всех таблицах поменяем значение атрибута border с 0 на 1, и в ячейках вложенных таблиц напишем произвольный текст.

Вот, что в результате должно у вас получиться:

Довольно привлекательно, не правда ли?

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

Поскольку формирование таблицы происходит по строкам, а не по колонкам, то для изменения вида колонок приходится задавать стиль практически для каждой ячейки. В этом случае удобно использовать разные классы — один для ячеек четных колонок, а второй — для нечетных. На рис. 1 показана таблица, которая формируется именно таким способом.

Цвет нечетных колонок можно задать путем добавления стилевых свойств к селектору TABLE , а для четных колонок введем новый класс, назовем его even . Первая колонка обычно используется для заголовков строк, поэтому для нее имеет смысл задать стиль, отличный от стиля остальных ячеек. В данном случае вводим еще один класс, назовем его lc и для него определим выравнивание по левому краю и цвет текста (пример 1). Остается для ячеек первой колонки добавить к тегу

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

Простые две колонки через CSS

Здесь я не буду описывать замороченные техники полурезиновых и на четверть эластичных дизайнов. Просто обычная фиксированная страница. Где размеры всех колонок указаны либо в пикселах , либо в процентах , либо в EMах . И имеем такой вот HTML:

#wrap{
width:700px;

FLOAT для двухколоночного дизайна

Проще всего сделать две колонки с помощью свойства FLOAT, вот так я их как правило и делаю: (ukr.net , pravda.com.ua , )

#main{
float:left;
width:500px;
#side{
float:right;
width:200px;

Еще можно так

#main{
float:left;
#side{
float:left;

Вот и все. Для того что бы блок #wrap растянулся до своего содержимого(#side + #main) достаточно задать:

#wrap{
overflow:hidden;

Из недостатков float методов – при переполнении одного из блоков – колонка может сползать(в ИЕ конечно). Но с этим можно и нужно бороться.

абсолютное позиционирование

Как известно “absolutные” блоки позиционируются относительно ближайших родительских relative-блоков. Как по мне, position:absolute – один из самых сильных инструментов в построении страниц.
Вот такой ЦСС построит нам две колонки.

#wrap{
position:relative;
#main{
position:absolute;
left:0;
width:500px;
#side{
position:absolute;
left:500px;
width:200px;

39 комментариев к “Как я делаю две колонки”

Латрек | 24 November, 2005

Теперь о проблеме “колонок одинаковой высоты”. К счастью эта проблема тоже успешно решена. Можете почитать . Там даже есть пример . (и мой пример)

zaARTix | 5 December, 2005

[b]akella
что не пост – то споры о таблицах:)

| 27 December, 2005

[…] и мистические CSS свойства которые могут спасти от бед, таящихся в этом злобном броузере. Как я делаю две колонки – самые простыe две колонки которые только могут быть. Просто про […]

Привіт!
Прикольно, скільки бачив технік(2 здається:) “очистки” флоатів, то з overflow:hidden зустрівся вперше…Щось у мене на блозі не спрацювало(футер що був у “wrap” розлізся), але це надихає що накінець мож буде здихатися атавізма як “очистки флоатів за допомогою структурного маркапа”.
Корисно!
Залік:)

Alex | 25 October, 2006

А что насчет отрицательных маржинов, противоположных направлению float’а? :) – чтобы не падало.

| 26 October, 2006

Это уже сложнее чем “простые две колонки” , а я все стремился к простоте и той самой прозрачности)

Ха, два ответа на Ваш комент и оба к одному свелись:)

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

Vladson | 16 June, 2007

Вот кстати о простоте, я тут начитался всякого “бреда” (замечу в кавычках) и решил попробовать сделать 2 колонки как можно проще и вот к чему пришёл…

Нового в принципе ничего нет, 75% всего что там использовано я вычитал тут остальные 25% в других местах однако в том что касается простоты (и кроссбраузерности) мне кажется очень даже не плохо получилось…

Естественно “шапка” (“хеадер”) сделана типичнее некуда (на 99% “валидных” сайтов сделано также…)

Очень обидно что я никак не смог сделать “футер”, все решения которые приходили в голову слишком сложные и не кроссбраузерные (а это явно не вписывается в мои цели)

(Повторяю я не претендую на что-то новое, речь исключительно о простоте реализации)

| 16 June, 2007

Спасибо – это отличный способ, единственный недостаток – футер, но его можно поместить в одну из колонок и тогда все зашибись)

Vladson | 18 June, 2007

Да помещенте футера в одну из колонок техника знакомая (именно на этом самом сайте я впервые и увидел упомянание об этом способе) но мне кажется что это слегка “левый” вариант так-как мне кажется весь смысл “дивной-вёрстки” в том чтоб HTML-разметка была полностью независима от CSS-оформления а в данном случае получается что HTML придётся “подгонять” под оформление (т.е запихивать “футер” внутрь div-а одной из колонок хотя его место вовсе не там…)

Вы такой умный.
Конечно, делать говносайты в говнодизайне можно и дивами.
А слабо порезать хороший дизайн и сделать его тянущимся без использования таблиц?
То-то же.

| 2 April, 2008

*ROFL*
Вы заблуждаетесь. Я очень туп, и никогда в жизни :)
Тем не менее моего скудного ума хватает на приличный код, жаль что высоты мудрости которых вы достигли не позволяют вам научиться верстать:)

Заметил одну проблему с абсолютным позиционированием в браузере ie8!
если дать в двухколоночном макете правом и левом диву по 50% ширины почему то возникает горизонтальная полоса прокрутки! если же ничего соотношения процентное будет другое(не 50 на 50) то полоса прокрутки исчезает!
Что думаете по этому поводу?! И как это можно исправить?!

мля и откуда же берутся эти недоразвитые любители табличной верстки! Когда они уже вымрут! Когда мля до вас уже дойдет что дивы это стандарт а верстка таблицами изначально была ошибочной! Таблицы используют для другого – для табличных данных!
И так на заметку что бы не ломать голову как же заверстать дизайн на дивах надо изначально дизайнеру мыслить дивами и продумывать! Увы многие дизайнеры ограничиваются только знанием фотожопы и до остального а в частности что ихнии рисунки надо преврамтить в хтмл-страницы – им нет дела!

А все нашел решение! Надо для одного из дивов поставить left:0; а для другого right:0; (замест left:50% например)!

Хорошая статья, только я вот уже битый час ломаю голову, а почему нельзя под …. в примере с абсолютным позицированием пихнуть ещё какой-нить … чтобы он просто за ним следом следовал? Я уже и так и сяк тыркался, не выходит. Выход есть?

Резинится норм…контент сносится до минимума, дивы не прыгают.
всем удачи!
=============
body{margin: 10 20 10 20;}

#wrap {background-color:#CCCCCC;}

#head {width:100%;background-color:#DDCCFF;}

#left{width:300px;background:#00CCFF;float:left;position:relative;z-index:1;}

#content{margin-left:320px;background:#CCCССС;word-wrap:break-word;}

#footer {float:right;width: 100%;height:50px;background-color:#000000;}

head
left
content
footer

опс…пардон

head
left
content
footer

“[” и “]” заменяем соответственно на “”)))

блин…ну вообщем квадратные скобки на знаки больше и меньше)) кавычки тож нормальные нужно.
это для новичков)

kodiua | 31 May, 2010

хоть пост и стары, но всё еще актуальный. Спасибо за объяснение.
Сам дошел до флоатов, но в опере и мазиле не растягивался див, помогло
overflow:hidden;
Спасибо.

Никита | 18 August, 2010

Вопрос: у меня две картинки (кнопки от feedburner и tweecounter) они ложаться друг под друга. я пытаюсь их выставить в строчку через div style
пробовал

так же во втором div ставил position:right и absolute

Есть ещё варианты?

Levik | 19 August, 2010

Несмотря на “возраст” статьи она не потеряла свою актуальность:) Отлично подходит в качестве пособия начинающему “верстальщику” (сам периодически “начинаю” верстать и в очередной раз обращаюсь к ней)

sweb27 | 20 December, 2012

Спасибо, пригодилось статься, забыл про overflow:hidden; … глупо так, но бывает.

Метод с абсолютным позиционированием вообще до гениальности идеален, особенно для фиксированной ширины. Причём в некоторых случаях можно даже на дивах сэкономить и задавать свойства для HTML и BODY а в отдельные DIV-ы уже пихать доп колонку (или даже не одну если аккуратно)
Более того, если учесть что в последнее время (слава богу) всё чаще встречается разметка по сантиметрам/дюймам то получается вообще просто (а главное более чем кросбраузерно)

Уже более чем 7 лет прошло (пост №4) сменилось не одно поколение новых “веяний моды” и даже поколений браузеров, а я в этом способе так и не разочаровался.