X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Расположить три дива по горизонтали
Serg563
Serg563
Topic Starter сообщение 19.4.2009, 0:51; Ответить: Serg563
Сообщение #1


Вот код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
}
#block_1 {
background-color: #0F0;
height: 200px;
width: 200px;
}
#block_2 {
height: 200px;
width: 200px;
background-color: #F00;
}
#block_3 {
background-color: #09F;
height: 200px;
width: 200px;
}
-->
</style>
</head>

<body>
<div id="container">
<div id="block_1"></div>
<div id="block_2"></div>
<div id="block_3"></div>
</div>
</body>
</html>
Чтобы расположить три блока по горизонтали (один за другим), нужно у всех трех блоков поставить float:left. Но тогда основной див (container) не "обтекает" эти три блока а куда-то исчезает. А мне надо чтобы обтекал. Почему так происходит и как решить эту проблему?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pomp
pomp
сообщение 19.4.2009, 1:37; Ответить: pomp
Сообщение #2


Как не обтекает?Он не может не обтекать, так как являеться родительским. Не вижу проблемы. С float:left; все чудненько.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Serg563
Serg563
Topic Starter сообщение 19.4.2009, 1:43; Ответить: Serg563
Сообщение #3


pomp, допустим, уберем у трех блоков цвет, а диву "container" наоборот - присвоим.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
background-color: #0F0;
}
#block_1 {
height: 200px;
width: 200px;
float: left;
}
#block_2 {
height: 200px;
width: 200px;
float: left;
}
#block_3 {
height: 200px;
width: 200px;
float: left;
}
-->
</style>
</head>

<body>
<div id="container">
<div id="block_1"></div>
<div id="block_2"></div>
<div id="block_3"></div>
</div>
</body>
</html>


Проверяем. Цвета у контейнера нет. Почему?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pomp
pomp
сообщение 19.4.2009, 2:18; Ответить: pomp
Сообщение #4


Потому что размер контейнеру не задан :hihi:
Он тянеться ровно на столько - какого размера блоки.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ease
ease
сообщение 19.4.2009, 6:18; Ответить: ease
Сообщение #5


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
right: 200px;
margin-left: -100%;
}
#right {
width: 150px;
margin-right: -100%;
}
* html #left {
left: 150px;
}
body {
margin: 0;
padding: 0;
background: #FFF;
}
#left {
background: #66F;
}
#center {
background: #DDD;
}
#right {
background: #F66;
}
#container .column {
padding-top: 1em;
text-align: justify;
}
</style>
</head>

<body><div id="container">
<div id="center" class="column">центр</div>
<div id="left" class="column">левая колонка</div>
<div id="right" class="column">правая колонка</div>
</div>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Apay
Apay
сообщение 19.4.2009, 9:52; Ответить: Apay
Сообщение #6


<div id="container">
<div id="center" class="column">центр</div>
<div id="left" class="column">левая колонка</div>
<div id="right" class="column">правая колонка</div>
<div style="clear:both;"></div>
</div>

и контейнер растянется
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klenovnn
klenovnn
сообщение 19.4.2009, 17:39; Ответить: klenovnn
Сообщение #7


Учитесь пользоваться поиском, данный вопрос уже решался.
css
div#s-all {width:100%;}
div#s-col1 {float:left; width:200px;}
div#s-col2 {float:right; width:200px;}
div#s-content {margin:0 210px 0 210px;} /*чтобы отступы были от блоков слева и справа*/
html
<div id="s-all">
<div id="s-header">шапка</div>
<div style="clear:both;">
<div id="s-col1">левое меню</div>
<div id="s-col2">правое меню</div>
<div id="s-content">содержание</div>
<div style="clear:both;">
<div id="footer">дно</div>
</div>
Дальше разберешься думаю.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Продаю три статьи
 1 GERRARD 5894 12.6.2017, 17:26
автор: ABCDF
Открытая тема (нет новых ответов) Акция, по 400 три дя
 0 garik2012 1786 9.11.2014, 0:55
автор: garik2012
Открытая тема (нет новых ответов) YouTubeMonster v.2.0 - в три раза больше трафика! Новая версия приватного софта и эксклюзивные темы!
 4 TheStarkoff 4135 29.7.2014, 15:04
автор: TheStarkoff
Открытая тема (нет новых ответов) Три маленьких задания за деньги
 1 Karmakulov 3346 13.12.2013, 10:53
автор: -cren-
Открытая тема (нет новых ответов) Смена дива
 1 xkant 6416 30.4.2013, 11:56
автор: -Bartle96-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 25.4.2024, 4:15

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet