Как сделать три колонки css
Перейти к содержимому

Как сделать три колонки css

  • автор:

Как сделать три колонки на css

Подскажите пожалуйста, как при помощи css сделать три горизонтальных колонки ? Две я сделал, а вот с центральной ни как разобраться не могу.

#column-1 < border: 1px solid #DDD; padding: 10px 10px; width: 48.6%; float: left; >#column-2 < >#column-3

Отслеживать
задан 29 дек 2012 в 18:04
Родион Поляков Родион Поляков
462 2 2 золотых знака 10 10 серебряных знаков 38 38 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Вот Вам пример резинового макета — http://jsfiddle.net/Alex83/5rpJN/6/

body, html < width: 100%; height: 100%; >#column-1 < width: 20%; background: red; float: left; min-height: 100%; >#column-2 < background: green; width: 60%; min-height: 100%; float: left; >#column-3
left
center
right

Спрашивайте, если вдруг не понятно.

А вот Вам еще в догонку фиксированный макет — http://jsfiddle.net/Alex83/4UtDc/4/

body, html < width: 100%; height: 100%; >.wrapper < width: 300px; height: 100%; margin: 0 auto; background: red; >#column-1, #column-2, #column-3 < float: left; min-height: 100%; >#column-1 < width: 50px; background: red; >#column-2 < width: 200px; background: green; >#column-3
 
left
center
right

Отслеживать
1,548 8 8 серебряных знаков 16 16 бронзовых знаков
ответ дан 29 дек 2012 в 18:43
2,833 3 3 золотых знака 24 24 серебряных знака 44 44 бронзовых знака

Да, кстати, не забывайте учитывать, что если вы будете задавать такие свойства как padding и border, то и размер блоков, для которых эти правила были заданы, будет увеличен. если нужно, чтобы размер не менялся, то учитывайте это в коде. например, нам нужно чтобы блок был шириной и высотой в 100px; напишем такой код: div < width: 100px; height: 100px; padding: 10px; border: 10px; >Ширина и высота блока в данном случае = 140px; Для того, чтобы этого избежать, уменьшаем размер блока на 40px; или используем свойство css3 box-sizing: border-box; Удачи

Текст в три колонки

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

Inline-block

Элементы со свойством display: inline-block встают в одну строку, но у них появляются отступы, чтобы их убрать можно указать e родительского блока font-size: 0 или white-space: nowrap .

.textcols < white-space: nowrap; font-size: 0; >.textcols-item < white-space: normal; display: inline-block; width: 30%; vertical-align: top; background: #fff2e1; margin-right: 5%; font-size: 14px; >.textcols .textcols-item:last-child

Макет в 3 колонки

Здесь вы узнаете, как сделать 3-х колоночный макет сетки при помощи CSS.

Колонка 1

Колонка 2

Колонка 3

Как сделать макет в 3 колонки

Шаг 1) Добавляем HTML:

Шаг 2) Добавляем CSS:

Здесь мы создаем три одинаковые колонки:

 .column < float: left; width: 33.33%; >/* Сбрасываем обтекание после колонок */ .row:after

Здесь мы создаем три колонки разной ширины:

 .column < float: left; >.left, .right < width: 25%; >.middle

Здесь мы добавляем колонкам адаптивность:

 /* Адаптивный макет – когда ширина экрана меньше 600px, колонки будут отображаться друг над другом, а не рядом друг с другом */ @media screen and (max-width: 600px) < .column < width: 100%; >> 

Идеальная 3-колоночная вёрстка средствами CSS

Самое правильное руководство по созданию трехколоночной верстки средствами CSS. Материал от нашего подписчика.

Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS.

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

На просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код.

Данная статья более подойдет для новичков в веб-разработке, и я хочу поделиться им, ведь новички — это свежие умы, которые рано или поздно заменят старых нудных кодеров.

Наша цель — сделать трехколоночный сайт, блоки которого будут:

  1. Уменьшаться в зависимости от размера экрана (т.е. не будут уходить вниз);
  2. Растягиваться по всей ширине экрана (обычно это 2-х колоночный сайт);
  3. Адаптироваться при уменьшении заданных размеров.

Итак, приступим. Для того, чтобы сделать горизонтальные 3 колонки, мы будем использовать свойство display: inline-block. Да-да, свойство float уже не так актуально, но оно нам все же понадобится.

Прежде чем задать им свойства, создадим 3 блока, обернув их в классы main и inline:

left content right 

Далее будет логично написать стили для этих классов, что мы и сделаем:

html, body .main < margin:0 auto; /* Центрируем блоки */ width:100%; /* Задаем ширину 100%, чтобы сделать ее резиновой */ max-width:700px; /* Устанавливаем максимальную ширину */ >.inline div < display:inline-block; /* Делаем блоки по горизонтали */ display: -moz-inline-stack; /* Для FireFox 2, тот же самый, что и inline-block */ vertical-align:top; /* Выравниваем их сверху */ font-size:16px; /* Ставим дочкам размер шрифта, иначе примет значение родителя */ /* Для IE 6 и IE 7, чтобы блоки были по горизонтали zoom: 1; *display: inline; */ >div.inline /* Ставим родителю значение 0, чтобы убрать отступы у блоков*/ .left-block < background:red; width:20%; /*Задаем ширину в процентах чтобы сделать ее резиновой*/ height:300px; /* Высота блока */ >.content < background:green; width:60%; height:300px; >.right-block

Идеальная 3-колоночная вёрстка средствами CSS 1

Размер окна больше 900px

Идеальная 3-колоночная вёрстка средствами CSS 2

Размер окна меньше 900px

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

Для того, чтобы растянуть дизайн на всю ширину экрана, достаточно удалить свойство max-width:700px в классе main.

Чтобы дизайн полностью не уменьшался при малых размерах окна, а адаптировался, добавляем в стили @media запрос:

/* Простой пример @media запроса*/ @media (max-width:600px) < .inline div < display:block; /* Делаем блоки “Блочными”, т.е. друг под другом */ width:100%; /* Задаем на всю ширину экрана */ height:100px; >> 

Более подробно можно посмотреть на JS Fiddle — приветствуется любое изменение кода в лучшую его сторону.

За материал выражаем благодарность нашему подписчику, Рималю Сафарову.

Однако обратите внимание, что проще всего добиться такого результата средствами CSS Flexbox, о котором мы подробно рассказали в нашей статье.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *