- Регистрация
- 9 Май 2015
- Сообщения
- 1,071
- Баллы
- 155
- Возраст
- 51
Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS.
Также пропустим ту часть, где я рассказываю, что у меня была мечта создать идеальный шаблон с 100% адаптацией и кроссбраузерностью.
На просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код.
Данная статья более подойдет для новичков в веб-разработке, и я хочу поделиться им, ведь новички — это свежие умы, которые рано или поздно заменят старых нудных кодеров.
Наша цель — сделать трехколоночный сайт, блоки которого будут:
Итак, приступим. Для того, чтобы сделать горизонтальные 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;
}
}
Более подробно можно посмотреть — приветствуется любое изменение кода в лучшую его сторону.
— .
Также пропустим ту часть, где я рассказываю, что у меня была мечта создать идеальный шаблон с 100% адаптацией и кроссбраузерностью.
На просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код.
Данная статья более подойдет для новичков в веб-разработке, и я хочу поделиться им, ведь новички — это свежие умы, которые рано или поздно заменят старых нудных кодеров.
Наша цель — сделать трехколоночный сайт, блоки которого будут:
- Уменьшаться в зависимости от размера экрана (т.е. не будут уходить вниз);
- Растягиваться по всей ширине экрана (обычно это 2-х колоночный сайт);
- Адаптироваться при уменьшении заданных размеров.
Итак, приступим. Для того, чтобы сделать горизонтальные 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;
}
}
Более подробно можно посмотреть — приветствуется любое изменение кода в лучшую его сторону.
За материал выражаем благодарность нашему подписчику, .
— .