Как выставить 3 дива в ряд в css
- Автор темы iurix
- Дата начала
- Статус
M
masto
Прохожие
стили width и float
- Заблокирован
- #3
не все так просто? если захочется выровнять. masto- ты слишком краток
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
Держи шпаргалочку. Тут тебе на все варианты, вдруг выплывут дальше вопросы
- Автор темы
- #4
нашел простой способ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<style type="text/css">
<!--
.fl24 {
float: left;
width: 24%;
}
.a {
background-color: #336699;
}
.b {
background-color: #669966;
}
.hk {
clear: both;
}
-->
</style>
</head>
<body>
<div class="fl24 a">Content for class "a" Goes Here</div>
<div class="fl24 b">Content for class "a" Goes Here</div>
<div class="fl24 a">Content for class "a" Goes Here</div>
<div class="fl24 b">Content for class "a" Goes Here</div>
<div class="hk"></div>
Content for class "a" Goes Here Content for class "a" Goes Here Content for class "a" Goes Here Content for class "a" Goes Here Content for class "a" Goes Here
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<style type="text/css">
<!--
.fl24 {
float: left;
width: 24%;
}
.a {
background-color: #336699;
}
.b {
background-color: #669966;
}
.hk {
clear: both;
}
-->
</style>
</head>
<body>
<div class="fl24 a">Content for class "a" Goes Here</div>
<div class="fl24 b">Content for class "a" Goes Here</div>
<div class="fl24 a">Content for class "a" Goes Here</div>
<div class="fl24 b">Content for class "a" Goes Here</div>
<div class="hk"></div>
Content for class "a" Goes Here Content for class "a" Goes Here Content for class "a" Goes Here Content for class "a" Goes Here Content for class "a" Goes Here
</body>
</html>
Wharfadale
Постоялец
- Регистрация
- 31 Июл 2007
- Сообщения
- 57
- Реакции
- 2
Используйте флоаты!!!
Вот так:
#raz {float:right}
#dva {float:right}
#tri {float:right}
<div id="raz"></div>
<div id="dva"></div>
<div id="tri"></div>
Вот так:
#raz {float:right}
#dva {float:right}
#tri {float:right}
<div id="raz"></div>
<div id="dva"></div>
<div id="tri"></div>
- Заблокирован
- #8
Для этого надо юзать атрибуту inline.
cds
Постоялец
- Регистрация
- 28 Янв 2007
- Сообщения
- 90
- Реакции
- 9
только лучше влево выровнять
чтобы не расползлось:
Код:
#raz {float:right}
#dva {float:right}
#tri {float:right}
#container,
#container div {height: 200px}
<div id="container">
<div id="raz"></div>
<div id="dva"></div>
<div id="tri"></div>
</div>- Статус