27/32 Хочу критику

Курсы §15. Сетки
1 
 <body>
    <div class="container">
        <div class="header">Header</div>
        <div class="menu">
            <div class="padding-menu">Menu</div>
        </div>
        <div class="promo-container .clearfix">
             <div class="promo">Promo 1</div>
             <div class="promo">Promo 2</div>
        </div>
    </div>
    <div class="column">
        <div class="column1">Left</div>
        <div class="column1">Main</div>
        <div class="column1">Right</div>
    </div>
    <div class="footer">
        <div class="padding-footer">Footer</div>
    </div>
</body>

html,

body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.container {
width: 450px;
background: #34495e;
padding: 10px 0px;
}
.clearfix::after {

content:"";
clear: both;

}
.header {
width: 345px;
height: 30px;
background: #c0392b;
margin: 0px auto;
padding: 5px 0px 0px 5px;
}
.menu {
background:#3498DB;
margin: 10px 0px 10px 0px;
height: 25px;
padding: 5px 0px ;
}
.padding-menu {
width: 340px;
height: 25x;
margin: 0px auto;
}
.promo-container {
width: 350px;
height: 55px;
margin: 5px auto;
}
.promo {
background: #c0392b;
width: 165px;
height: 55px;
float: left;
padding: 5px 0 0 5px;

}
.promo:last-child {
float: right;
}
.column {
width: 350px;
height: 110px;
margin: 10px auto;
}
.column1 {
box-sizing: border-box;
float: left;
width: 70px;
height: 110px;
padding: 5px 0 0 5px;
background: #3498DB;
}
.column1:nth-child(2) {
width: 190px;
margin: 0 10px;
}
.footer {
width: 450px;
height: 25px;
padding: 5px 0;
background: #34495e;
}
.padding-footer {
width: 340px;
height: 25px;
margin: 0 auto;
}

2

У ваших блоков фиксированные высоты. Распорка не работает.[quote=“JohnnyJO, post:1, topic:5241”]
.clearfix::after {

content:"";
clear: both;

}
[/quote]

Нет свойства display со значением table. А в html-коде класс написан с точкой вначале.[quote=“JohnnyJO, post:1, topic:5241”]
<div class=“promo-container .clearfix”>
[/quote]

3

смотрите, я убрал точку лишнюю в хтмл, добавил тейбл в клирфикс (вообще, я не совсем понял как это все работает, а гайды из интернета говорят, что у клирфикса больше минусов, чем плюсов, поэтому решил без распорки делать). Сейчас решил сделать с клирфиксом, немного подкорректировал:
.promo-container {
width: 350px;
margin: 5px auto;
}
и после вашего комментария меня заинтересовал следующий вопрос, фиксированные высоты - плохо?
Кстати, я понимаю, что распорка не работает со значением блок, но почему именно тейбл?

4

А еще гайды говорят, что сетка на флоатах - это “прошлый век”.
Если сетка на флоатах, то использование clearfix - обязательное условие (чаще всего пишут display: table; , иногда display: block; - и то, и другое работает), иначе сетка разваливается. Ваша без распорок держится на фиксированных высотах. Замените на min-height и посмотрите, что от верстки останется.

5

везде заменить на мин-хейт?

6

Да, везде.

7

Ничего не изменилось.

8

Последнюю версию кода текстом, пожалуйста.

9 
html,

body {
margin: 0;
padding: 0;
}

body {
width: 450px;
min-height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.container {
width: 450px;
background: #34495e;
padding: 10px 0px;
}
.clearfix::after {
display: table;
content:"";
clear: both;
}
.header {
width: 345px;
min-height: 30px;
background: #c0392b;
margin: 0px auto;
padding: 5px 0px 0px 5px;
}
.menu {
background:#3498DB;
margin: 10px 0px 10px 0px;
min-height: 25px;
padding: 5px 0px ;
}
.padding-menu {
width: 340px;
min-height: 25x;
margin: 0px auto;
}
.promo-container {
width: 350px;
margin: 5px auto;
}
.promo {
background: #c0392b;
width: 165px;
min-height: 55px;
float: left;
padding: 5px 0 0 5px;

}
.promo:last-child {
float: right;
}
.column {
width: 350px;
min-height: 110px;
margin: 10px auto;
}
.column1 {
box-sizing: border-box;
float: left;
width: 70px;
min-height: 110px;
padding: 5px 0 0 5px;
background: #3498DB;
}
.column1:nth-child(2) {
width: 190px;
margin: 0 10px;
}
.footer {
width: 450px;
min-height: 25px;
padding: 5px 0;
background: #34495e;
}
.padding-footer {
width: 340px;
min-height: 25px;
margin: 0 auto;
}

10

если в боди убрать мин, то все равно работает.

11

Правильно, ничего не меняется, потому что распорки есть.

12

Чем вариант с распоркой лучше моего предыдущего варианта (где размеры фиксированные)?

13

Попробуйте вместо названий блоков (Header, Menu, Promo и т. д.) в качестве содержимого написать больше текста. Например, такое:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lorem turpis, pharetra accumsan auctor at, malesuada vitae est. Sed sit amet tortor tellus. Vivamus justo dolor, accumsan non velit eu, vehicula facilisis risus. Aliquam mollis mi ornare viverra efficitur. Pellentesque in justo ultricies ipsum tempus rutrum. Duis semper feugiat erat, id aliquet elit facilisis eu. Aliquam rutrum, odio sed laoreet accumsan, quam ante fermentum mi, vitae finibus ipsum quam sit amet eros. Duis ac finibus enim, eu egestas lorem.

Поэкспериментируйте.

1 лайк
14

Да, я понял: с фиксой будет происходит беда, а с клирфиксом это решается. Спасибо.

1 лайк
15

Основа основ же. Интересные у Вас гайды)

16

Ну, я то ток начинаю) Мне многое непонятно, а лезть сразу в ответы - лучший способ не научиться делать. Начал читать и там понеслась