VPF::float+display=? - Форум программистов

GQU

Дата 13.6.2011, 11:53 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 272
Регистрация: 13.2.2011

Репутация: нет
Всего: нет

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

Код


<head>
<style type="text/css">
#main_square {
width:500px;
height:500px;
background-color:Gray;
border:1px solid #000000;
margin:0 auto;
float:right;
display: block;
}
.square1 {
border:1px solid #000000; 
background-color:GreenYellow;  
width:80px; height:80px; 
float:right;
display: block;
}
.square2 {
border:1px solid #000000; 
background-color:Green;  
width:80px; height:80px; 
float:right;
display: block;
}
</style>
</head>
<body>
<div id="main_square">
<div class="square1">1</div>
<div class="square2">2</div>
</div>
</body>

Это сообщение отредактировал(а) GQU - 13.6.2011, 12:04

нуп

Дата 13.6.2011, 12:08 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 1
Всего: 33

Код


<div id="main_square">
<div class="square1">1</div>
<div style="clear:both;"></div>
<div class="square2">2</div>
</div>

GQU

Дата 13.6.2011, 12:56 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 272
Регистрация: 13.2.2011

Репутация: нет
Всего: нет

В .square2 можно было display: block не писать
В итоге вот:

Код


<head>
<style type="text/css">
#main_square {
width:500px;
height:500px;
background-color:Gray;
border:1px solid #000000;
margin:0 auto;
}
.square1 {
border:1px solid #000000; 
background-color:GreenYellow;  
width:80px; height:80px; 
float:right;
display: block;
}
.square2 {
border:1px solid #000000; 
background-color:Green;  
width:80px; height:80px; 
float:right;
clear:right;
}
</style>
</head>
<body>
<div id="main_square">
<div class="square1">1</div>
<div class="square2">2</div>
</div>
</body>

Я вот эти 2 строки плохо понимаю, поправьте если что

Код


float:right;
clear:right;

float:right - располагает элементы справа на лево
clear:right - запрещает располагаться элементам справа на лево, но при этом не запрещает располагаться просто справа, т.к у вышестоящего квадрата display: block, то квадрат "2" располагается под квадратом 1
Так? smile

Это сообщение отредактировал(а) GQU - 13.6.2011, 13:02

нуп

Дата 13.6.2011, 13:07 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 1
Всего: 33

htmlbook.ru там есть описание. Читайте про дивную верстку и разберетесь smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »