Помощь с флоатами:(

Курсы §15. Сетки
1

Друзья! Не совсем понял в чем суть. зафлоаченные блоки promo1 promo2 не реагируют на width и height, а подстраиваются под текст внутри, НО зафлоаченные блоки right main left на заданную ширину и высоту отзываются. Проблему с первыми решил с помощью установки padding’ов, загадкой осталось, почему блоки, которые находятся по сути в одних и тех же условиях, реагируют на ширину и высоту по разному.

2

Покажите код. Оценим “одни и те же” условия.

3

html,
body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.section1 {
padding-top: 10px;
padding-bottom: 10px;
background-color: #34495e;
}
.header {
height: 35px;
background-color: #c0392b;
}
.menu {
height: 35px;
margin-top: 10px;
background-color: #3498DB;
}
.promo1,
.promo2 {
margin-top:10px;
padding-bottom:45px;
padding-right:120px;
background-color: #c0392b;
float: left;
}
.promo2 {
float: right;
}
.section2 {
padding-top: 10px;
padding-bottom: 10px;
}
.left {
width: 70px;
height: 110px;
background-color: #3498DB;
float:left;
margin-right: 10px;
}
.main{
width: 190px;
height: 110px;
background-color: #3498DB;
float:left;
}
.right{
width: 70px;
height: 110px;
background-color: #3498DB;
float:right;

}

.footer{
height: 35px;
background-color: #34495e;

}

.layout-positioner{
width: 350px;
margin: auto;
}
.layout-positioner::after {
display: table;
content: “”;
clear: both;
}
.text{
display: inline-block;
padding: 5px;

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/

4

html-код тоже. Кнопка для вставки </> в редакторе сообщений.

6 
<body>
<div class="section1">
    <div class="layout-positioner">
        <div class="header">
            <span class="text">Header</span>
    </div>
        </div>
        <div class="menu">
            <div class="layout-positioner">
            <span class="text">Menu</span>
            </div>
        </div>
    <div class="layout-positioner">
        <div class="promo1 test">
            <span class="text">Promo 1</span>
        </div>
        <div class="promo2 test">
            <span class="text">Promo 2</span>
        </div>
    </div>
</div>

<div class="section2">
    <div class="layout-positioner">
        <div class="left">   
           <span class="text"> Left</span>
        </div>
        <div class="main"> 
           <span class="text"> Main</span>
        </div>
        <div class="right"> 
           <span class="text"> Right</span>
        </div>

    </div>
</div>

<div class="footer">
    <div class="layout-positioner">
          <span class="text">  Footer</span>
    </div>
</div>
7

Одинаково реагируют. Попробуйте:

.promo1,
.promo2 {
margin-top:10px;
/*padding-bottom:45px;
padding-right:120px;*/
width: 170px;
height: 60px;
background-color: #c0392b;
float: left;
}
8

я не могу понять: вы берете блочный элемент div, засовываете в него строчный span, который делаете блочно-строчным, чтобы к нему применить паддинги - зачем? с какой целью эта конструкция из двух оберток у текста? не проще ли остановится на первом div-е и применять паддинги уже к нему?

9

хм… и правда, очень странно, я долго гуглил в чем же беда:grimacing:
Спасибо.

10

Вы правы, спасибо за замечание, но “изящность” кода не влияла на ошибку)

11

В принципе он прав. Текст внутри блоков должен быть дополнительно обернут. В данном случае эта надпись рассматривается как содержимое блока, контент. Другой момент, что здесь лучше подошел бы тег <p>. Он блочный по умолчанию в отличие от span.

12

хорошо, обертка в<span>используется, чтобы потом задать паддинги для текста. ну вот, например, вот этот кусок:

<div class="section2">
    <div class="layout-positioner">
        <div class="left">   
           <span class="text"> Left</span>
        </div>
        <div class="main"> 
           <span class="text"> Main</span>
        </div>
        <div class="right"> 
           <span class="text"> Right</span>
        </div>

    </div>
</div>

здесь же паддинги можно спокойно задать для .left, .right, .main без использования <span>

аналогично и здесь:

<div class="layout-positioner">
        <div class="promo1 test">
            <span class="text">Promo 1</span>
        </div>
        <div class="promo2 test">
            <span class="text">Promo 2</span>
        </div>
    </div>
13

Можно, я ведь не говорю, что нельзя. Просто это другой подход. Но он тоже правильный. <span> здесь используется не только для отступов, а как “контейнер” (если так можно выразиться) для содержимого блока.

14

а как же минимализация кода?

15

В рамках задания или вообще?

16

и задания и вообще :slight_smile:

17

В рамках задания конечно можно обойтись и без обертки, а вообще внутри блока .promo1 (например) наверняка будут другие блоки, то есть он не будет последней оберткой и код короче не будет.

1 лайк