Верстка в две колонки html

Как с помощью CSS создать макет сайта из двух колонок

В этой статье мы поэтапно рассмотрим правила верстки сайта с двумя колонками. Код, приведенный нами, позволит вам добавить шапку и подвал, охватывающие эти две колонки.

Вступление

Для выполнения заданий этой статьи вы должны иметь навыки написания кода как на HTML , так и на CSS . Если это не так, тогда вам лучше использовать визуальный редактор.

Обратите внимание, что вы вовсе не должны быть экспертом в HTML или CSS . Вам просто нужно иметь базовые знания этих технологий, иначе эта статья будет вам непонятна.

Использование свойства float для создания двух колонок

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

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

Базовый HTML код для сайта с двумя колонками

HTML часть кода довольно проста. Нам нужно только два блока div , по одному для каждого столбца:

Слова » Меню навигации » и » Контент » являются лишь указателями для боковой панели навигации и основного контента. Позже вы удалите эти слова, когда расположите в блоках реальный контент. div «container» — это блок, содержащий два столбца. Его можно использовать, если нужно применить определенные стили к обоим столбцам.

CSS-код для сайта с двумя колонками

Приведенный ниже CSS код использует проценты ( «%» ) для определения ширины обеих колонок. Так как они измеряются в относительных единицах, то будут расширяться или сжиматься, чтобы заполнить все окно браузера независимо от того, какую ширину оно имеет. Например, если вы измените размер окна браузера, шаблон перестроит столбец так, чтобы он максимально соответствовал границам окна.

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

Как приведенный выше код работает на практике, можно увидеть здесь.

Как это работает: пояснения к CSS-коду

Правило » float: right » определяет, как блок DIV выводится из общего потока документа, а также размещается справа от всех других элементов, обтекающих его слева. Первый блок DIV , который встречается на HTML-странице , смещается в первую очередь.

В приведенном выше примере » #content » первым сдвигается вправо и для него задается ширина в 80% от ширины окна браузера. Наше следующее правило также выводит » #navbar » из потока документа и смещает его вправо.

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

Как разместить колонку навигации справа

Приведенный ранее код размещает меню навигации в левой колонке. Если нужно, чтобы меню навигации размещалось справа, измените код следующим образом:

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

Как корректно изменить ширину

Согласно установленным техническим правилам верстки, приведенные выше стили, задают для боковой колонки ширину в 20% от ширины окна браузера, а для колонки контента — 80%, что в сумме дает 100%.

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

Если одна из колонок смещается ниже другой: как это исправить

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

Это может произойти, даже если вы используете мои значения » 20% » и » 80% «. Например, если добавить поля, рамки и отступы для одной или обеих колонок. Ширина этих столбцов также увеличится, что приведет к тому, что общая сумма будет превышать 100%.

Кроссбраузерность и правила верстки подразумевают два способа решения этой проблемы:

• Уменьшить значение ширины колонок, пока браузер не выведет их так, как вы хотите. Но помните, что проценты являются относительной единицей измерения. Она привязана к ширине окна браузера пользователя. Поэтому, если вы тестировали макет на своей системе, и обнаружили, что при добавлении к padding-left 10 px к одной из колонок и уменьшении ширины на 1%, все работает прекрасно, то нельзя делать вывод, что 1% = 10 пикселей. Иными словами, 1% от 1024 пикселей отличается от 1% от 1920 пикселей, и так далее. Убедитесь, что вы учитываете различия ширины окна в других браузерах и диагоналях экрана;
• Решение, которое предпочитаю я, заключается в том, чтобы создать внутри блоков » #navbar » и » #content » вложенный DIV , и поместить в него все отступы, поля, рамки и фактический контент. Таким образом, для внешних блоков можно оставить старые 20% и 80%, не заботясь о поправках на поля, отступы и т.д.

Например, в демо-сайте с двумя колонками используется следующий HTML-код для создания вложенного блока DIV :

К написанным ранее стилям CSS добавьте следующие свойства для » #innercontent » и » #innernavbar «:

CSS для » #content » и » #navbar » остаются такими же, как описано в первой половине этой статьи.

Так как отступ применяется к внутреннему блоку DIV , размеры наружных блоков остаются неизменными, и у нас сохраняется макет с двумя колонками.

Как добавить шапку и подвал сайта, растягивающиеся на обе колонки

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

Чтобы создать шапку и подвал, используя макет с двумя колонками, измените HTML-код и добавьте два дополнительных блока DIV :

 
Добавьте следующий код CSS в существующую таблицу стилей. Поместите его после стилей, которые были заданы ранее:

Если вы хотите, чтобы текст в шапке выравнивался по центру, добавьте следующий код. Иначе отдельно задавать стиль шапки нет необходимости:

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

Приведенный выше код можно увидеть в действии на демо-сайте с шапкой, подвалом и двумя колонками .

Заключение

С помощью приведенного выше кода CSS вы сможете самостоятельно создавать сайты с двумя колонками.

Источник

Текст в две колонки HTML: как это сделать и какие теги использовать?

Текст в две колонки в HTML можно сделать несколькими путями. И , естественно , п ри помощи таблицы стилей CSS.

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

Текст в две колонки в HTML

Мы приведем несколько примеров того, как сделать текст в две колонки в HTML при помощи CSS.

Свойство display: inline-block;

Допустим , у нас есть такой HTML:

Левая колонка с текстом

.

Правая колонка с текстом

.

Код CSS будет:

.text2cols

white-space: nowrap;

>

.text2cols-item

white-space: normal;

display: inline-block;

width: 48%;

vertical-align: top;

background: #fff2e1;

>

.text2cols .text2cols-item:first-child

margin-right: 4%;

>

2 колонки HTML пр и помощи табличного представления

Допустим , у нас есть такой HTML:

Левая колонка с текстом

.

Правая колонка с текстом

.

У нас будет вот такой CSS:

.text2cols

display: table;

width: 100%;

border-collapse: collapse;

>

.text2cols-row

display: table-row;

>

.text2cols-item

display: table-cell;

width: 50%;

vertical-align: top;

padding: 0;

background: #fff2e1;

>

.text2cols-row .text2cols-item:first-child

border-right: 30px solid #fff;

>

.text2cols-row .text2cols-item:last-child

border-left: 30px solid #fff;

>

Используем свойство «float»

Допустим , у нас есть код HTML:

Левая колонка с текстом

.

Правая колонка с текстом

.

У нас будет вот такой CSS:

.text2cols

overflow: hidden;

>

.text2cols-left

float: left;

width: 48%;

background: #fff2e1;

>

.text2cols-right

margin-left: 52%;

background: #fff2e1;

>

Используем свойство «flexbox»

Используя набор свойств «colum n s»

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

Источник