 CSS - Обтекание бокса текстом при position: relative; |
| веб-мастеру | блог веб-мастера | Статьи Веб-Мастера | SEO Tools | книги веб-мастеру |
Здравствуйте, гость ( Вход | Регистрация )
  |
| art-factor |
  18.4.2008, 14:55
Сообщение
#1
|
|
Прохожий  Группа: Пользователи Сообщений: 1 Регистрация: 17.4.2008 Из: BRD, Augsburg Пользователь №: 766  |
Доброе время суток!
Вопрос у меня следующий: Почему при position: relative; у "contents" текст в "contents" не обтекает бокс "author" ??? а ложиться под него ??? Даже при наличии у бокса "author" float: right !  <style type="text/css"> .header { width: 100%; background: #ccffff; } .contents { width: 100%; background: #ffffcc; position: relative; color: 555555; padding: 30px 30px 30px 30px; } .author { width: 35%; background: #ffcccc; position: absolute; top: 0; right: 0; padding: 30px 30px 30px 30px; float: right } .footer { width: 100%; background: #ccccff; } </style> <div class="header"> </div> <div class="contents" aling="right">................ .... .................. ................ .... .................. ................ .... .................. <div class="author">................ .... .................. </div> </div> <div class="footer"> </div> Какое может быть решение? Спасибо |
   |
 
|
| Gesha |
18.4.2008, 15:55
Сообщение
#2
|
 Прохожий Группа: Пользователи Сообщений: 3 Регистрация: 28.1.2008 Пользователь №: 536 |
Цитата(art-factor @ 18.4.2008, 17:55)  Доброе время суток! Вопрос у меня следующий: Почему при position: relative; у "contents" текст в "contents" не обтекает бокс "author" ??? а ложиться под него ??? Даже при наличии у бокса "author" float: right ! <style type="text/css"> .header { width: 100%; background: #ccffff; } .contents { width: 100%; background: #ffffcc; position: relative; color: 555555; padding: 30px 30px 30px 30px; } .author { width: 35%; background: #ffcccc; position: absolute; top: 0; right: 0; padding: 30px 30px 30px 30px; float: right } .footer { width: 100%; background: #ccccff; } </style> <div class="header"> </div> <div class="contents" aling="right">................ .... .................. ................ .... .................. ................ .... .................. <div class="author">................ .... .................. </div> </div> <div class="footer"> </div> Какое может быть решение? Спасибо Вообще при виде позиционирования "relative" подразумеваеться что элемент с данным видом будет смещен на соответствующую величину, а остальные элементы не изменят своего местоположения, как будто-то ничто, никуда не смещалось... Если вам надо, чтоб один элемент обтекал другой, то используйте вышеописанный вами "float:", и не надо указывать ширину блока 100%, только в IE, подвал иногда наползает на другие блоки, вот тут чудесным, и неизвестно каким образом спасает "width: 100%". Вот код: Цитата <style type="text/css"> .header {background: #ccffff; } .contents { width: 100%; background: #ffffcc; color: 555555; padding: 30px 30px 30px 30px; } .author {background: #ffcccc; top: 0; right: 0; padding: 30px 30px 30px 30px; float: right } .footer {background: #ccccff; } </style> <div class="header"> </div> <div class="author">текст текст текст текст текст текст текст текст текст текст текст текст текст </div> <div class="contents" aling="right">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div> </div> <div class="footer"> </div> --------------------  |
|
|
|
 |
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0
|
Текстовая версия | Сейчас: 12.5.2008, 13:16 |
Русская версия Invision Power Board
v2.1.7 © 2008 IPS, Inc.