• Что бы вступить в ряды "Принятый кодер" Вам нужно:
    Написать 10 полезных сообщений или тем и Получить 10 симпатий.
    Для того кто не хочет терять время,может пожертвовать средства для поддержки сервеса, и вступить в ряды VIP на месяц, дополнительная информация в лс.

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

  • Гость, Что бы Вы хотели увидеть на нашем Форуме? Изложить свои идеи и пожелания по улучшению форума Вы можете поделиться с нами здесь. ----> Перейдите сюда
  • Все пользователи не прошедшие проверку электронной почты будут заблокированы. Все вопросы с разблокировкой обращайтесь по адресу электронной почте : info@guardianelinks.com . Не пришло сообщение о проверке или о сбросе также сообщите нам.

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

Sascha Оффлайн

Sascha

Заместитель Администратора
Оффлайн
Команда форума
Администратор
9 Май 2015
1,063
282
155
48
Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS.

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

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

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

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

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

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

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

<div class="main inline">
<div class="left-block">left</div>
<div class="content">content</div>
<div class="right-block">right</div>
</div>

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

<style>
html, body {margin:0;padding:0;}
.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 {font-size:0;} /* Ставим родителю значение 0, чтобы убрать отступы у блоков*/
.left-block {
background:red;
width:20%; /*Задаем ширину в процентах чтобы сделать ее резиновой*/
height:300px; /* Высота блока */
}
.content {
background:green;
width:60%;
height:300px;
}
.right-block {
background:blue;
width:20%;
height:300px;
}
</style>


Результат:


Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.


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


Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.


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


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

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

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

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

Более подробно можно посмотреть

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

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


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

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

.​


Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

.