Xpoint
   [напомнить пароль]

Вездесущность clear:left при нескольких float:left

Метки: [без меток]
2007-07-18 07:26:37 [обр] maelucky[досье]
сообщение промодерировано

Имеется вот что:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Заголовок</title>
<style>
div{position:relative}
#left{width:200px;float:left}
#right{margin-left:200px}
</style>
</head>
<body>
<div id="left">yo<br />dfg<br />dsfgo<br />dfg<br />dsfgo<br />dfg<br />dsfg</div>
<div id="right">
<img src="1.gif" align="left" />
dfgo<br clear="left" />dfg<br />dsfgo<br />dfg<br />dsfgo<br />dfg<br />dsfg
</div>
</body>
</html>

Выглядит это вот так: http://www.talica.ru/public/01.GIF
Как сделать, чтобы было так (http://www.talica.ru/public/02.GIF) ?
Получается, что <br clear="left" /> отменяет не только тот float, который у img, но и тот, который у левой колонки.
Как укротить его вездесущность в этом случае?

спустя 1 час 59 минут [обр] Евгений Петров(172/1055)[досье]

Либо вкладывать картинку в блочный элемент с overflow:hidden.

#left{float:left;width:200px;}
#right{margin:0 0 0 200px;}
.left{float:left;}
.img{overflow:hidden;}
...
<div id="left">...</div>
<div id="right"><div class="a"><img src="1.gif" class="img"></div>...</div>

Либо использовать не пересекающиеся области. В этом случае буду 2 колонки

#out{float:right;width:100%;margin:0 0 0 -200px;}
#right{margin:0 0 0 200px;}
#left{float:left;width:200px;}
...
<div id="out">
  <div id="right">...</div>
</div>
<div id="left">...</div>
спустя 9 минут [обр] Евгений Петров(172/1055)[досье]
Напутал. В первом случае будет так:
#left{float:left;width:200px;}
#right{margin:0 0 0 200px;}
.img{overflow:hidden;}
.img img{float:left;}
...
<div id="left">...</div>
<div id="right"><div class="img"><img src="1.gif"></div>...</div>
спустя 21 час [обр] maelucky[досье]
Спасибо.
Правда, я решил проблему иначе. Вместо overflow:hidden я написал display:inline-block, и в этом диве уже использовал float у изображения, таким образом я обошёлся без clear-а.
спустя 53 минуты [обр] Евгений Петров(172/1055)[досье]
В MZ свое решение проверяли?
спустя 6 часов [обр] maelucky[досье]
Неа не проверял. Но вроде у MZ есть "свой" подобный параметр (-moz-inline-box?), который работает так же.
Или нет?
Скачаю сёдня его и гляну...
спустя 46 минут [обр] Евгений Петров(172/1055)[досье]
А после того, как поставите -moz-inline-box, я спрошу про Оперу и Safari.
спустя 4 часа 29 минут [обр] maelucky[досье]
Ну можно ведь их одновременно-то поставить?
Или нет?
А то щас в опере всё отлично.
спустя 52 минуты [обр] Евгений Петров(172/1055)[досье]
maelucky[досье] Если действовать по вашему первоначально предложенному варианту, неужели 3-хпиксельный баг в IE не возникает (при превышении высоты контента правой части высоты левой части)? Версии IE 6 и ниже.
А в Safari проверяли?
спустя 2 часа 14 минут [обр] maelucky[досье]

Извиняюсь, был слишком самоуверен. Таки поставил overflow:hidden.
Теперь Опера и Мозилла всё нормально показывают.
Но появились проблемы с ИЕ.

  1. Именно та самая проблема, которую я обозначил в начале темы.

Т.е. если ставить в конце дива <br clear="all" />, то этот clear отменяет float левой колонки. А если не ставить, то следующий блок также огибает предыдущую картинку. Проблема только в ИЕ.

  1. Кроме того, внезапно обнаружилось, что если обе колонки обернуть в глобальный <div id="all">, и поставить ему background, то картинки с float-ом в ИЕ не будут видны. В Опере и Мозилле нормально. Как лечить?
спустя 38 минут [обр] maelucky[досье]
Гм, поставил одновременно display:inline-block и overflow:hidden. Обе проблемы исчезли (и картинки появились). Теперь в ИЕ 6, Опере 9.20 и Мозилле 2 всё правильно показывает.
Интересно, можно ли так делать, и не ждут ли меня сюрпризы с другими версиями браузеров?
спустя 6 часов [обр] maelucky[досье]
А что за 3-хпиксельный баг, интересно?
спустя 2 часа 40 минут [обр] Евгений Петров(172/1055)[досье]
Масса описаний.
Powered by POEM™ Engine Copyright © 2002-2005