Затрудняюсь сделать правильный перенос блоков div

@Besouro · Регистрация: 17.09.2011

Студворк — интернет-сервис помощи студентам

Проблема заключается в следующем : Мне нужно чтобы при сужении экрана браузера, блоки 1 2 3 4 5 6 7 8 съезжали вниз . Т.е все этажи становились полностью вертикальными. Кто поможет - буду признателен. Заранее спасибо

html код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<div id="body"> 
      <div class="floor">
         <div class="blok">
                 <div id="one"></div>
                     <div class="vert_line"><a href="" class="body">Идея</a></div>
             </div>
         <div class="blok">
                 <div id="two"></div>
                 <div class="vert_line"><a href="" class="body">Домен</a>
                     <p>Мы зарегистрируем для вас доменное имя</p></div>    
             </div>
         <div class="blok">
                 <div id="three"></div>
                 <div class="vert_line"><a href="" class="body">Сайт</a>
                     <p>Разработаем и создадим сайт под ваши требования</p></div>    
             </div>
          </div>
      <div class="floor">         
         <div class="blok">
                 <div id="four"></div>
                     <div class="vert_line"><a href="" class="body">Контент</a>
                         <p>Подготовим и разместим материалы на вашем сайте</p>
                         </div>
             </div>   
             <div class="blok">
                 <div id="five"></div>
                     <div class="vert_line"><a href="" class="body">Хостинг</a>
                         <p>Разместим ваш сайт на собственных серверах</p>
                         </div>
             </div>   
             <div class="blok">
                 <div id="six"></div>
                     <div class="vert_line"><a href="" class="body">Сопровождение</a>
                         <p>Будем постоянно присматривать за вашим сайтом</p>
                         </div>
                 </div>         
           </div>
           <div class="floor">
         <div class="blok">
                 <div id="seven"></div>
                     <div class="vert_line"><a href="" class="body">Реклама</a>
                         <p>Поможем продать в интернете ваши товары и услуги</p>
                         </div>
             </div>   
             <div class="blok">
                 <div id="eight"></div>
                     <div class="vert_line"><a href="" class="body">Продвижение</a>
                         <p>Выведем ваш сайт на первые позиции в поисковых машинах</p>
                         </div>
             </div>    
           </div>        
   </div>

CSS код

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
#body{
min-width:950px;
float:left;
width:100%;
height:350px;
max-height:1050px;
}
 
#one{
min-width:180px;
margin-left:5px;
height:30px;
background-color: #F0F0F0;
background-image: url(01.jpg);
background-repeat: no-repeat;
}
#two{
min-width:180px;
margin-left:9px;
height:30px;
background-image: url(02.jpg);
background-repeat: no-repeat;
}
#three{
min-width:180px;
margin-left:9px;
height:30px;
background-image: url(03.jpg);
background-repeat: no-repeat;
}
#four{
min-width:180px;
margin-left:9px;
height:30px;
background-image: url(04.jpg);
background-repeat: no-repeat;
}
#five{
min-width:180px;
margin-left:9px;
height:30px;
background-image: url(05.jpg);
background-repeat: no-repeat;
}
#six{
min-width:180px;
margin-left:9px;
height:30px;
background-image: url(06.jpg);
background-repeat: no-repeat;
}
#seven{
min-width:180px;
margin-left:9px;
height:30px;
background-image: url(07.jpg);
background-repeat: no-repeat;
}
#eight{
min-width:180px;
margin-left:9px;
height:30px;
background-image: url(08.jpg);
background-repeat: no-repeat;
}
div.floor{
min-width:180px;
height:120px;
max-height:1080px;
width:100%;
}
div.blok {
float:left;
padding-left:4px;
width:28%;
min-width:180px;
height:110px;
}
div.vert_line{
background-image: url(vert_line.jpg);
background-repeat: no-repeat;
height:57px;
margin-left:9px;
float:left;
padding-top:5px;
padding-left:10px;
width:260 px;
min-width:180px;
}

Картинки во вложении

@vantyz · 07.11.2012, 19:37

Если не ошибаюсь,то надо добавить:

CSS
1
display: inline-block;

@Besouro · 07.11.2012, 19:43 **[ТС]**

Увы, мимо

( Еще попрошу, уточнять куда добавлять , в данном случае этот аттрибут указал во все ID. Но не помогло.

P.S Не по теме, но буду еще благодарен за уроки матчасти, как на русском языке называется ID , например a.blabla в CSS это класс, а ID "#blabla" ,что это ?

@vantyz · 07.11.2012, 19:49

как я понял ко всем элементам)

Добавлено через 3 минуты
Вот простой пример,внизу:

HTML5
1
<div class="blabla">

тогда в css

CSS
1
2
.blabla{
}

теперь id

HTML5
1
<div id="blabla">

тогда в css

CSS
1
2
#blabla{
}

@Besouro · 07.11.2012, 19:52 **[ТС]**

Вопрос был немного другой, какое наименование имеет слово ID в CSS , Например, все что в ID или классах это аттрибуты, а у самого ID какое наименование. Да вообщем забей не важно, мне главное чтобы с примером выше помогли =))

@vantyz · 07.11.2012, 19:54

Типо,что вообще id?

Добавлено через 55 секунд
http://ktonanovenkogo.ru/html/... butov.html

@Besouro · 09.11.2012, 13:27 **[ТС]**

Проблема все ещё не решена

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@Besouro 0 / 0 / 0 Регистрация: 17.09.2011 Сообщений: 31
	07.11.2012, 19:43 [ТС]
	Увы, мимо ( Еще попрошу, уточнять куда добавлять , в данном случае этот аттрибут указал во все ID. Но не помогло. P.S Не по теме, но буду еще благодарен за уроки матчасти, как на русском языке называется ID , например a.blabla в CSS это класс, а ID "#blabla" ,что это ? 0

@Besouro 0 / 0 / 0 Регистрация: 17.09.2011 Сообщений: 31
	07.11.2012, 19:52 [ТС]
	Вопрос был немного другой, какое наименование имеет слово ID в CSS , Например, все что в ID или классах это аттрибуты, а у самого ID какое наименование. Да вообщем забей не важно, мне главное чтобы с примером выше помогли =)) 0

@vantyz 54 / 54 / 2 Регистрация: 04.03.2012 Сообщений: 495
	07.11.2012, 19:54
	Типо,что вообще id? Добавлено через 55 секунд http://ktonanovenkogo.ru/html/... butov.html 1

@Besouro 0 / 0 / 0 Регистрация: 17.09.2011 Сообщений: 31
	09.11.2012, 13:27 [ТС]
	Проблема все ещё не решена 0