Текст в несколько колонок давно уже применяется в издательском деле при вёрстке газет, журналов и книг. Человеку комфортнее читать текст определённой ширины, колонки как раз и обеспечивают разбиение большого текста на столбцы заданного размера. На сайтах это не всегда имеет смысл делать из-за ограниченности высоты окна браузера. Читателю вначале придётся прокрутить одну колонку вниз до конца, а затем вернуться наверх к началу следующей колонки, что довольно неудобно. Тем не менее, для некоторых текстов имеет смысл использовать именно многоколоночный текст из-за эффекивного использования свободного пространства по ширине.
CSS3 предлагает сразу четыре свойства для создания и управления колонками: column-count
, column-gap
, column-width
и column-rule
. Для наглядности значения некоторых свойств показаны на рис. 1.
Рис. 1. Стилевые свойства для колонок
Следует пояснить, что такое «оптимальное число» и «оптимальная ширина». Свойство column-count задаёт не точное количество колонок, а скорее желаемое. Браузер постарается разбить текст именно на столько колонок, но при уменьшении размеров окна будет сокращать число колонок, чтобы сохранить комфортность чтения. Аналогично обстоит и с шириной. Свойство column-width указывает минимальную ширину колонки, при этом браузер это значение может проигнорировать, если размер окна недостаточен для обеспечения заданной ширины колонок.
Браузер Chrome и Safari понимают эти свойства только с префиксом -webkit, а Firefox только с префиксом -moz. Комбинируем свойства для разных браузеров и получаем код, который создаёт трёхколоночный текст (пример 1).
Пример 1. Три колонки
HTML5 CSS 3 IE 9 IE 10 Cr Op Sa Fx
Дистинкция дискредитирует непредвиденный интеллект, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Аподейктика порождена временем. Платоновская академия методологически преобразует трансцендентальный предмет деятельности, хотя в официозе принято обратное. Отношение к современности реально создает позитивизм, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Культ джайнизма включает в себя поклонение Махавире и другим тиртханкарам, поэтому гетерономная этика преобразует типичный принцип восприятия, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения. Катарсис, по определению, непредвзято оспособляет онтологический даосизм, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.
Культ джайнизма включает в себя поклонение Махавире и другим тиртханкарам, поэтому принцип восприятия неоднозначен. Платоновская академия раскладывает на элементы смысл жизни, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Ощущение мира, как следует из вышесказанного, подчеркивает язык образов, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Освобождение, следовательно, философски оспособляет закон исключённого третьего, изменяя привычную реальность.
Результат данного примера в браузере Chrome показан на рис. 2. Вместо трёх колонок мы наблюдаем две из-за малой ширины окна браузера. При увеличении размеров окна число колонок вырастет до заданного, при дальнейшем уменьшении ширины окна, наоборот, количество колонок сократится до одной.
Рис. 2. Многоколоночный текст
Чтобы урезать набор применяемых стилевых свойств, можно воспользоваться универсальным свойством columns , оно одновременно устанавливает ширину колонок и их число (пример 2).
Пример 2. Использование columns
Column { -webkit-columns: 200px 3; -moz-columns: 200px 3; columns: 200px 3; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; -webkit-column-rule: 1px solid #ccc; -moz-column-rule: 1px solid #ccc; column-rule: 1px solid #ccc; }
Опять же, для работы некоторых браузеров требуется добавить свои префиксы. Расстояние между колонок и параметры разделительной линии, если это требуется, приходится задавать дополнительными свойствами. Если column-gap и column-rule не указаны, линия между колонок не отображается, но некоторое минимальное расстояние между колонок в любом случае сохраняется.
Текстовый редактор Ворд позволяет форматировать текст самыми разными способами. Последние версии данной программы настолько обросли различными функциями, что сейчас нет практически ничего, чего не умеет делать этот текстовый редактор. В этой статье мы расскажем о том, как сделать текст в две колонки в Ворде.
Для того чтобы сделать текст в две колонки в Ворде вам необходимо перейти на вкладку «Разметка страницы » и нажать на кнопку «Колонки ». После этого появится выпадающее меню, в котором вы сможете выбрать количество колонок, которые вы хотите разместить на этой странице.
В данном выпадающем меню доступны такие варианты:
Кроме этого в выпадающем меню есть пункт «Другие колонки ». Данный пункт открывает дополнительное окно, в котором можно настроить ширину колонок и промежуток между ними.
Также размер колонок можно установить с помощью линейки, которая находится над страницей.
Второй способ создания колонок в Ворде можно считать неправильным, но зачастую он более удобен. Для данного способа используются таблицы с невидимыми рамками. Перейдите в вкладку «Вставка » и с помощью кнопки «Таблица » создайте таблицу с двумя колонками.
После того как таблица создана установите курсор во внутрь таблицы и перейдите на вкладку «Работа с таблицами – Конструктор ». Здесь нужно сменить тип линии, которая используется для рисования границ таблицы. Для этого откройте выпадающее меню и выберите «Без границы ».
Такая линия видна во время редактирования документа, но не отображается при его печати.
Если вы используете Word 2003, то для того чтобы сделать текст в две колонки вам нужно открыть меню «Формат – Колонки ». После этого появится окно «Колонки ».
В этом окне нужно выбрать количество колонок и нажать на кнопку «OK ». При необходимости вы можете настроить ширину колонок, промежутки между ними, а также другие параметры.
Здесь я не буду описывать замороченные техники полурезиновых и на четверть эластичных дизайнов. Просто обычная фиксированная страница. Где размеры всех колонок указаны либо в пикселах , либо в процентах , либо в EMах . И имеем такой вот HTML:
Проще всего сделать две колонки с помощью свойства FLOAT, вот так я их как правило и делаю: (ukr.net , pravda.com.ua , )
Еще можно так
Вот и все. Для того что бы блок #wrap растянулся до своего содержимого(#side + #main) достаточно задать:
Из недостатков float методов – при переполнении одного из блоков – колонка может сползать(в ИЕ конечно). Но с этим можно и нужно бороться.
Как известно “absolutные” блоки позиционируются относительно ближайших родительских relative-блоков. Как по мне, position:absolute – один из самых сильных инструментов в построении страниц.
Вот такой ЦСС построит нам две колонки.
Теперь о проблеме “колонок одинаковой высоты”. К счастью эта проблема тоже успешно решена. Можете почитать . Там даже есть пример . (и мой пример)
zaARTix | 5 December, 2005[b]akella
что не пост – то споры о таблицах:)
[…] и мистические CSS свойства которые могут спасти от бед, таящихся в этом злобном броузере. Как я делаю две колонки – самые простыe две колонки которые только могут быть. Просто про […]
Привіт!
Прикольно, скільки бачив технік(2 здається:) “очистки” флоатів, то з overflow:hidden зустрівся вперше…Щось у мене на блозі не спрацювало(футер що був у “wrap” розлізся), але це надихає що накінець мож буде здихатися атавізма як “очистки флоатів за допомогою структурного маркапа”.
Корисно!
Залік:)
А что насчет отрицательных маржинов, противоположных направлению float’а? :) – чтобы не падало.
| 26 October, 2006Это уже сложнее чем “простые две колонки” , а я все стремился к простоте и той самой прозрачности)
Ха, два ответа на Ваш комент и оба к одному свелись:)
Но спасибо – пожалуй для полноты действительно стоило бы добавить, ведь некоторые могли это расценить как более менее общую перепись всех техник для двух колонок.
Vladson | 16 June, 2007Вот кстати о простоте, я тут начитался всякого “бреда” (замечу в кавычках) и решил попробовать сделать 2 колонки как можно проще и вот к чему пришёл…
Нового в принципе ничего нет, 75% всего что там использовано я вычитал тут остальные 25% в других местах однако в том что касается простоты (и кроссбраузерности) мне кажется очень даже не плохо получилось…
Естественно “шапка” (“хеадер”) сделана типичнее некуда (на 99% “валидных” сайтов сделано также…)
Очень обидно что я никак не смог сделать “футер”, все решения которые приходили в голову слишком сложные и не кроссбраузерные (а это явно не вписывается в мои цели)
(Повторяю я не претендую на что-то новое, речь исключительно о простоте реализации)
| 16 June, 2007Спасибо – это отличный способ, единственный недостаток – футер, но его можно поместить в одну из колонок и тогда все зашибись)
Vladson | 18 June, 2007Да помещенте футера в одну из колонок техника знакомая (именно на этом самом сайте я впервые и увидел упомянание об этом способе) но мне кажется что это слегка “левый” вариант так-как мне кажется весь смысл “дивной-вёрстки” в том чтоб HTML-разметка была полностью независима от CSS-оформления а в данном случае получается что HTML придётся “подгонять” под оформление (т.е запихивать “футер” внутрь div-а одной из колонок хотя его место вовсе не там…)
Вы такой умный.
Конечно, делать говносайты в говнодизайне можно и дивами.
А слабо порезать хороший дизайн и сделать его тянущимся без использования таблиц?
То-то же.
*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
“[” и “]” заменяем соответственно на “”)))
блин…ну вообщем квадратные скобки на знаки больше и меньше)) кавычки тож нормальные нужно.
это для новичков)
хоть пост и стары, но всё еще актуальный. Спасибо за объяснение.
Сам дошел до флоатов, но в опере и мазиле не растягивался див, помогло
overflow:hidden;
Спасибо.
Вопрос: у меня две картинки (кнопки от feedburner и tweecounter) они ложаться друг под друга. я пытаюсь их выставить в строчку через div style
пробовал
так же во втором div ставил position:right и absolute
Есть ещё варианты?
Levik | 19 August, 2010Несмотря на “возраст” статьи она не потеряла свою актуальность:) Отлично подходит в качестве пособия начинающему “верстальщику” (сам периодически “начинаю” верстать и в очередной раз обращаюсь к ней)
sweb27 | 20 December, 2012Спасибо, пригодилось статься, забыл про overflow:hidden; … глупо так, но бывает.
Метод с абсолютным позиционированием вообще до гениальности идеален, особенно для фиксированной ширины. Причём в некоторых случаях можно даже на дивах сэкономить и задавать свойства для HTML и BODY а в отдельные DIV-ы уже пихать доп колонку (или даже не одну если аккуратно)
Более того, если учесть что в последнее время (слава богу) всё чаще встречается разметка по сантиметрам/дюймам то получается вообще просто (а главное более чем кросбраузерно)
Уже более чем 7 лет прошло (пост №4) сменилось не одно поколение новых “веяний моды” и даже поколений браузеров, а я в этом способе так и не разочаровался.
Влад Мержевич
Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом, как правило, в одной колонке располагается основной материал (текст статьи, например), а во второй — ссылки на разделы сайта и другая информация. Для создания подобного макета таблицы достаточно удобны — каждая ячейка выступает в качестве отдельной колонки, что позволяет легко регулировать различные параметры отображения документа.
Для начала рассмотрим самый простой вариант, когда ширина левой колонки жестко задана в пикселах, а ширина правой колонки варьируется в зависимости от размеров окна браузера. Для этого требуется задать общую ширину всей таблицы в процентах через атрибут width тега
|
(пример 1).
Пример 1. Ширина колонки в пикселах
В данном примере граница у таблицы не отображается, а вертикальное выравнивание содержимого ячеек по верхнему краю определяется атрибутом valign со значением top . Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались бы относительно друг друга, а начинались одинаково от верхнего края. Атрибуты width и valign можно заменить стилевыми свойствами width и vertical-align с теми же значениями. Тогда данный код будет иметь следующий вид (пример 2). Пример 2. Использование стилей
Поля внутри колонокРасстояние между колонками регулируется атрибутом cellpadding тега
В данном примере значения атрибутов cellspacing и cellpadding равны нулю, а расстояние между содержимым колонок определяется свойством padding-right , который добавляется к левой ячейке через идентификатор с именем leftcol . Аналогично отступы можно регулировать не только справа, но и с других сторон каждой ячейки. В примере 4 показано, как устанавливать поля для всех ячеек через стили. Пример 4. Поля в ячейках
Цвет фона колонокЧтобы визуально отделить одну колонку от другой используют разные приемы, самым распространенным из них, пожалуй, является использование фонового цвета. Лучше указывать цвет через стили, это позволяет вынести оформление страницы в отдельный файл. Для этого создаем новый стилевой класс, устанавливаем для него свойство background и применяем его к требуемой ячейке (пример 5). Пример 5. Цвет фона
В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 1). Рис. 1. Колонки разного цвета Разделитель колонокИспользование полей не всегда подходит для установки нужного расстояния между колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу разных соображений. Тогда поможет добавление еще одной ячейки, которая выступает в качестве разделителя между колонками (пример 6). Пример 6. Использование трех ячеек
В данном примере вводится еще одна колонка со стилевым идентификатором spacer , это позволяет легко менять ширину между колонками. Внутрь этой ячейки можно ничего не вкладывать, браузеры достаточно корректно работают с подобными ячейками. На рис. 2 показан результат примера. Для наглядности и «красоты» вокруг колонок добавлена граница. Линия между колонкамиРазделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Опять же, здесь пригодятся стили, с помощью которых создание линий значительно упрощается. Следует только установить свойство border-left для правой колонки или border-right для левой (пример 7). Пример 7. Добавление линии
Результат данного примера показан ниже. РезюмеСоздание колонок с помощью таблиц процесс достаточно простой и быстрый, следует только добавить таблицу с двумя ячейками и определить ее визуальные атрибуты. К тому же большинство параметров, определяющих вид таблицы, можно вынести в стили и таким образом ускорить процесс добавления однотипных таблиц и документов на их основе. При двухколонном макете применяются разные средства по оформлению колонок. Например, используется фоновая заливка, добавляется рамка вокруг колонок, изменяется расстояние между ними или устанавливается вертикальная разделительная линия. Все эти вещи управляются с помощью стилей, что ведет к сокращению кода, расширяет варианты модификаций таблиц и удобству разработки сайта. Начинающие веб-мастеры довольно часто встречаются с проблемой расположения информации в один ряд. Будь то картинка слева и текст, расположенный справа, или два текстовых блока, представленных в виде колонок. Существует ряд способов, позволяющих выполнить поставленную задачу, но не каждый способ может решить проблему совместимости разных браузеров. Всё дело в том, что язык HTML интерпретируется многими браузерами неодинаково, т. е один браузер может отобразить информацию как мы и предполагали, а другой - совсем иначе. Вот тут и возникает знакомая многим сайтостроителям проблема. В погоне за кроссбраузерностью сайта, веб-дизайнеры ищут способы, позволяющие разработать страницу сайта так, чтобы она отображалась во всех браузерах одинаково. Наиболее удачным способом разметки дизайна страницы в языке html является таблица. Помимо своей основной функции таблица позволяет очень удачно служить "каркасом" дизайна сайта. В нашем случае, мы будем использовать таблицу для создания колонок с текстом. Расположение двух таблиц в одной строке.Для начала, давайте создадим таблицу, состоящую из двух столбцов со значением ширины рамки, равной 0 пикселов (border="0"
). (тег столбца таблицы) указываем атрибут valign со значением "top", отвечающий за то, чтобы информация располагалась с верхнего края таблицы. | Вот, примерно, какой html-код вы должны были получить:
В каждой ячейке (между тегами | ) нашей таблицы создаем ещё одну таблицу, но c шириной рамки, равной 1 пиксель, и с одним столбцом.Посмотрите, какая таблица должна получиться у вас: Атрибут "cellspace" в основной таблице равен 2. Привожу весь html-код, разработанный нами в данный момент:
Видите, ничего сложного. А главное - код читается во всех браузерах. Колонки с текстом.На основе этого мы можем с Вами создать колонки с текстом. Для этого в полученных нами таблицах меняем параметр "border" тега |
