VPF::float: left - Форум программистов

yalo

Дата 5.2.2007, 12:46 (ссылка)

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

Загрузка ...

Бывалый

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

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

Здравствуйте!
Возможно подобная проблема звучала косвенно, но не нашла.
Хочется использовать дивы - модно, умно, быстрее прогружаются и т.п...
Но у меня по крайней мере уже 2-й раз встает проблема при существовании горизонтального разделения в дизайне? типа того -|-|-, т.е. явно выражены блоки не занимающие всю ширину экрана, и не один в ряду, просится использовать float: left, но возникает один нюанс. Блоки часто приходится вкладывать в основной блок фиксированной ширины и центрировать этот основной блок по центру страницы, но - блоки, лежащие в нем со свойством float: left, не влияют на высоту блока, содержащего их

Код


<!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=windows-1251" />
<title>управление плавающими блоками</title>
<style type="text/css">
body { background: #C0A160;}
#main { margin: 0px auto; padding: 0px; border: 1px solid #FF00FF;}
#lft1 { float: left; width: 30%;  border: 1px solid #FF0000 }
#lft3 { float: left; width: 35%; min-height: 350px; border: 1px solid #FFff00; }
</style>
</head>
<body>
<div id="main">
    <div id="lft1">нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br /></div>
    <div id="lft3">минимально-фиксированный блок по высоте</div>
</div>
</body>
</html>

если основной блок не требуется обязательно центрировать, то вроде бы как выяснила через поиск на сайте, достаточно ему тоже присвоить float: left и тогда блоки взаимодействуют,

Код


<!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=windows-1251" />
<title>управление плавающими блоками</title>
<style type="text/css">
body { background: #C0A160;}
#main { margin: 0px; padding: 0px; border: 1px solid #FF00FF;float: left;}
#lft1 { float: left; width: 30%;  border: 1px solid #FF0000 }
#lft3 { float: left; width: 35%; min-height: 350px; border: 1px solid #FFff00; }
</style>
</head>
<body>
<div id="main">
    <div id="lft1">нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br /></div>
    <div id="lft3">минимально-фиксированный блок по высоте</div>
</div>
</body>
</html>

а как быть с основным блоком, который надо отцентрировать?

mishaSL

Дата 5.2.2007, 13:29 (ссылка)

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

Загрузка ...

Эксперт

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

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

Извини, после такого подробного объяснения проблемы совсем запутался.
Если ты хочешь отцентровать основной div, то это можно сделать к примеру так:

Код


<!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=windows-1251" />
<title>управление плавающими блоками</title>
<style type="text/css">
body { background: #C0A160;}
#main { clear: both; width: 50%;margin-left: auto; margin-right: auto;padding: 0px; border: 1px solid #FF00FF;}
#lft1 { float: left; width: 30%;  border: 1px solid #FF0000 }
#lft3 { float: left; width: 35%; min-height: 350px; border: 1px solid #FFff00; }
</style>
</head>
<body>
<div id="main">
    <div id="lft1">нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br />нефиксированной по высоте блок<br /></div>
    <div id="lft3">минимально-фиксированный блок по высоте</div>
</div>
</body>
</html>

--------------------

Лучший способ научиться программированию - это посмотреть как это делают другие...

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