Макет из двух колонок. Сервисы готовых открыток. Где их искать
Сегодня мы рассмотрим очень простой элемент адаптивной верстки, такой, как текст в два столбца. Поняв смысл, вы сможете делать и три и четыре столбца, которые, достигая заданной минимальной ширины уходят вниз. Естественно, к тексту можно добавлять картинки, да и абсолютно любые элементы дизайна.
Естественно, в столбцы или колонки, можно добавлять не только текст, но и любой другой контент. Еще такую адаптивную верстку блоков называют плавающей. Из-за чего? Читайте дальше и все поймете.
Приведенные ниже примеры текста в два столбца растягиваются на всю ширину контейнера. В моем случае это примерная область контента в блогах WordPress.
Текст в два столбца из редактора WordPress
Я брал сниппет из примера и просто ставил его путем копипаста через встроенный редактор WordPress в публикацию, все отлично работает. Только редактор нужно переключать в режим HTML
Адаптивная верстка. Текст в два столбца без картинок
Можно добавить кнопку в редактор
Чтобы не прописывать код текста в два столбца каждый раз вручную можно один раз , без использования плагина. Это очень удобно.
Ну и давайте разберемся по очень простому коду адаптивной верстки двух столбцов.
Вот привожу исходник HTML текста в двух столбцах:
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 разметка для адаптивных столбцов с картинками:
.............
...........
Чтобы взгляд читателя скользил по данным, представленным в колонках таблицы,
не перескакивая на соседний раздел, колонки удобно выделить цветом фона или
вертикальными линиями. При этом цвет четных и нечетных колонок может различаться.
Поскольку формирование таблицы происходит по строкам, а не по колонкам, то
для изменения вида колонок приходится задавать стиль практически для каждой
ячейки. В этом случае удобно использовать разные классы — один для ячеек
четных колонок, а второй — для нечетных. На рис. 1 показана таблица,
которая формируется именно таким способом.
Цвет нечетных колонок можно задать путем добавления стилевых свойств к селектору
TABLE
, а для четных колонок введем новый класс, назовем
его even
. Первая колонка обычно используется для
заголовков строк, поэтому для нее имеет смысл задать стиль, отличный от стиля
остальных ячеек. В данном случае вводим еще один класс, назовем его lc
и для него определим выравнивание по левому краю и цвет текста (пример 1).
Остается для ячеек первой колонки добавить к тегу
атрибут class="lc"
, а для ячеек четных колонок
class="even"
.
Пример 1. Колонки разного цвета
Таблица
| | 2004 | 2005 | 2006 |
| Рубины | 43 | 51 | 79 |
| Изумруды | 28 | 34 | 48 |
| Сапфиры | 29 | 57 | 36 |
Чтобы отделить первую строку с заголовком от данных таблицы в примере используется
двойная линия. Она получается за счет добавления свойства border-bottom
к селектору TH
.
Рассмотрим еще один способ формирования вида колонок — не только за счет
разного цвета фона, но и применением линий между колонками (рис. 2).
Структура кода останется практически той же, что была показана в примере 1.
А именно, для ячеек четных колонок используем класс even
,
а для первой колонки — класс lc
. Чтобы установить
линию между колонками, к селектору TD
добавляем свойство
border-left
, оно создает линию слева от ячейки.
Однако при этом возникнет ненужная линия слева в первой колонке, поэтому для
класса lc
используем border: none
,
это свойство уберет лишние границы (пример 2).
Пример 2. Линии между колонками
Таблица
| | 2004 | 2005 | 2006 |
| Рубины | 43 | 51 | 79 |
| Изумруды | 28 | 34 | 48 |
| Сапфиры | 29 | 57 | 36 |
К сожалению, работа с колонками таблицы не так удобна, как хотелось бы. Если
применять стили, то фактически все ячейки таблицы пестрят указаниями на определенный
стилевой класс. За счет этого снижается удобство по расширению табличных данных
и повышается объем кода. Существуют специальные теги
и
призванные облегчить работу с колонками
таблицы. Но их возможности ограничены, да и нужный результат будет отображаться
не во всех браузерах. Так что на данном этапе для создания таблиц желаемого
вида приходится обращаться к стилям.
В продолжение своего топика Новое в 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 можно очень просто и быстро разбивать тексты на удобочитаемые колонки. Список поддерживаемых браузеров уже достаточен, чтобы примерять мультиколоночность на рабочих проектах. Для устаревших браузеров можно применять специальную
Простые две колонки через 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) сменилось не одно поколение новых “веяний моды” и даже поколений браузеров, а я в этом способе так и не разочаровался.
Одним из наиболее популярных вариантов верстки веб-страниц выступает двухколонный
макет, где в левой колонке располагаются ссылки, а в правой колонке —
основной контент. Такая схема достаточно традиционна и привычна для пользователей,
поэтому также пользуется признанием среди разработчиков (рис. 1).
Рис. 1. Двухколонный макет с навигацией слева
Создание двух колонок происходит с помощью стилевого свойства float
со значением
left
, которое применяется для левой колонки. При этом одновременно следует
установить отступ слева для правой колонки, значение которого равно ширине
левой колонки плюс расстояние между ними (пример 1).
Пример 1. Создание двух колонок
#leftcol { /* Левая колонка */
float: left; /* Обтекание справа */
width: 200px; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
margin-left: 225px; /* Отступ слева */
}
Приведенный способ создания колонок хорош тем, что ширину первого слоя можно
задавать как в пикселах, так и процентах. При этом поменяются только значения
свойств width
и margin-left
(пример 2).
Пример 2. Ширина колонки в процентах
#leftcol { /* Левая колонка */
float: left; /* Обтекание справа */
width: 20%; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
margin-left: 21%; /* Отступ слева */
}
Окончательный вариант создания макета приведен в примере 3.
Пример 3. Полный листинг
Байки из склепа
Байки из склепа
Алтарь демона
Утром, при ярком солнечном свете, всё выглядело совсем не так и мрачно,
как планировалось, а даже наоборот. От свечей остались одни потёки, «кровь»
смотрелась как краска, а перья почти целиком разлетелись от ветра. Хорошо
сохранились только рисунки мелом, но и они были скорее прикольные, чем злые
и загадочные. Дети с неподдельным интересом разглядывали изображения, но
без тени тех чувств, которые испытали взрослые ночью при луне.
Тем не менее, оказался один человек, на которого работа произвела
большое впечатление, - сторож лагеря. Днём он подошёл к автору «алтаря».
Ваша работа? - начал сторож, кивая в сторону площади.
- А что такое?
- Ну, как же... Тут кровь..., перья птицы мёртвой..., знаки какие-то страшные
нарисованы..., а у вас всё же дети маленькие, они испугаться могут...
При использовании отступов и полей помним, что браузер устанавливает
ширину слоя с учетом свойств width
, border
, padding
и margin
.
Популярное в рубрике:
Как объединить слои в фотошопе в один или соединить их в группу...
читать
Перенос контактов на новый телефон android
читать
Самсунг Галакси перезагружается сам по себе — Решения Galaxy note...
читать
Основные возможности Kaspersky Rescue Disk
читать
Top
| 
