Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 06.05.2010, 03:13   #1
boget
Пользователь
 
Аватар для boget
 
Регистрация: 06.05.2010
Сообщений: 10
Репутация: 10
Сообщение Позиционирование блоков и обтекание

Вот код, который получается на данный момент:
<div style="margin-top:187px; margin-left: 58px; width: 206px; height: 70px; background:#9F6; position:relative;">
<div style="float:left; width: 50px; height:19px;"></div><div style="float:right; width: 50px; height:19px; background:#C06; vertical-align:bottom; bottom:0px;"></div>
текст текст текст текст текст текст текст текст текст текст текст текст
</div>

Отображение на выходе:

Как сделать, чтоб красный квадратик был в правом нижнем углу зеленого квадратика и чтоб его сверху и слева обтекал текст?
Изображения
Тип файла: jpg 01.jpg (18.8 Кб, 27 просмотров)
boget вне форума   Ответить с цитированием
Старый 06.05.2010, 10:14   #2
MrJenika
Форумчанин
 
Аватар для MrJenika
 
Регистрация: 07.09.2009
Сообщений: 361
Репутация: 53
По умолчанию

просто поменяйте местами блоки с текстом и квадратиком
Код:

<div style="margin-top:187px; margin-left: 58px;
 width: 206px; height: 70px; background:#9F6; position:relative;">
текст текст текст текст текст текст текст текст
 текст текст текст текст
<div style="float:left; width: 50px; height:19px;"></div><div style="float:right; width: 50px; height:19px; 

background:#C06; vertical-align:bottom; bottom:0px;"></div>
</div>

__________________
webinmd.com
MrJenika вне форума   Ответить с цитированием
Старый 06.05.2010, 12:57   #3
boget
Пользователь
 
Аватар для boget
 
Регистрация: 06.05.2010
Сообщений: 10
Репутация: 10
По умолчанию

Если поменять местами, то зеленый из левого верхнего угла съезжает в левый нижний угол, а красный так же при появлении новых строк съезжает вниз, а хотелось бы, чтоб его текст обтекал слева при появлении новых строк. Например, если увеличить высоту до 40px, то получится:
Изображения
Тип файла: jpg 01.jpg (19.4 Кб, 15 просмотров)
boget вне форума   Ответить с цитированием
Старый 06.05.2010, 13:28   #4
MrJenika
Форумчанин
 
Аватар для MrJenika
 
Регистрация: 07.09.2009
Сообщений: 361
Репутация: 53
По умолчанию

так вы не задавайте высоту блока и тогда он будет тянуться на всё содержимое. То есть уберите height: 70px;
__________________
webinmd.com
MrJenika вне форума   Ответить с цитированием
Старый 06.05.2010, 14:18   #5
boget
Пользователь
 
Аватар для boget
 
Регистрация: 06.05.2010
Сообщений: 10
Репутация: 10
Вопрос

Если не задавать, то все равно текст не обтекает красный блок слева. Для наглядности увеличил высоту красного блока до 40px и левый блок синим сделал:

код:
<div style="margin-top:187px; margin-left: 58px;
width: 206px; background:#9F6; position:relative;">
<div style="float:left; width: 50px; height:40px; background:#06F;"></div>
текст текст текст текст текст текст текст текст
текст текст текст текст

<div style="float:right; width: 50px; height:40px; background:#C06; vertical-align:bottom; bottom:0px;"></div>
</div>
boget вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CSS позиционирование блоков klyne HTML и CSS 7 30.04.2010 12:45
Позиционирование Syltan HTML и CSS 0 25.03.2010 20:15
Позиционирование serg_sk HTML и CSS 0 18.03.2010 21:42
Фиксированное позиционирование блоков. Андрей79 HTML и CSS 0 17.08.2009 11:50
Позиционирование каретки Spice Win Api 1 25.03.2009 05:51


22:09.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru