VPF::Позиционирование блоков DIV - Форум программистов

jsse

Дата 1.5.2006, 18:41 (ссылка)

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

Загрузка ...

Шустрый

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

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

Подскажите - как сделать, чтоб текст обтекал блоки one,two,three.

Пример моего кода.

Код


<html>

<style>
   .main {
     background: red;
     width: 500px;
     position: relative;
   }

  .one {
    background: blue;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 150px;
    height: 150px;
  }
  
  .two {
    background: green;
    position: absolute;
    right: 150px;
    bottom: 0px;
    width: 200px;
    height: 50px;
  }
  
  .three {
    background: gray;
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 150px;
    height: 150px;    
  }  
</style>

<div class="main">

     <div>
       text text text text text text text text text text text text text text text text text text text 
       text text text text text text text text text text text text text text text text text text text       
       text text text text text text text text text text text text text text text text text text text 
       text text text text text text text text text text text text text text text text text text text       
       text text text text text text text text text text text text text text text text text text text 
       text text text text text text text text text text text text text text text text text text text       
       text text text text text text text text text text text text text text text text text text text 
       text text text text text text text text text text text text text text text text text text text       
       text text text text text text text text text text text text text text text text text text text 
       text text text text text text text text text text text text text text text text text text text       
       text text text text text text text text text text text text text text text text text text text 
       text text text text text text text text text text text text text text text text text text text       
       text text text text text text text text text text text text text text text text text text text 
       text text text text text text text text text text text text text text text text text text text
       text text text text text text text text text text text text text text text text text text text 
       text text text text text text text text text text text text text text text text text text text
       text text text text text text text text text text text text text text text text text text text 
       text text text text text text text text text text text text text text text text text text text
       text text text text text text text text text text text text text text text text text text text 
       text text text text text text text text text text text text text text text text text text text  
     </div>
    
    <div class="one">
      1     
    </div>
    
    <div class="two">
      2
    </div>

    <div class="three">
      3
    </div>
    
    
</div>

</html>

R.M.

Дата 2.5.2006, 10:52 (ссылка)

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

Загрузка ...

Анархист

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

Репутация: 9
Всего: 30

Код

display: inline;

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

Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia

jsse

Дата 2.5.2006, 11:31 (ссылка)

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

Загрузка ...

Шустрый

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

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

Цитата

display: inline;

Ставил в различных комбинациях(в разных блоках) - не помогает...

Можт структура на ДИВ для такой задачи делается по-другому? smile

R.M.

Дата 2.5.2006, 12:18 (ссылка)

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

Загрузка ...

Анархист

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

Репутация: 9
Всего: 30

Сори не вглядывался в код. Щас посмотрел, могу сказать что обтикания небудет т.к. идёт наложение слоем на текст. А чтобы было обтикание надо их разместить на одну плоскость т.е. position: relative; но при display: inline; перестанут работать размеры. Вообщем было бы проще если бы было понятно для чего это smile

Вообщем попробуй убери absolute, спозиционируй div'ы как надо (внутри .main) и там уже будет видно

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

jsse

Дата 2.5.2006, 15:23 (ссылка)

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

Загрузка ...

Шустрый

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

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

Цитата(Куксикус @ 2.5.2006, 12:18

)

Вообщем попробуй убери absolute, спозиционируй div'ы как надо (внутри .main) и там уже будет видно

Вот именно, что спозиционированы они как надо!
А вот текстом не обтекаются...

R.M.

Дата 2.5.2006, 15:41 (ссылка)

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

Загрузка ...

Анархист

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

Репутация: 9
Всего: 30

jsse, не обтекаются т.к. на разных слоях. Попробуй одинаковый z-index поставить. Может поможет

Добавлено @ 15:42
А вообще что должно быть в этих div'ах? Если картинки то лучше без div'ов. <img align='left'> smile

ты получше опиши ситуацию

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

jsse

Дата 4.5.2006, 19:31 (ссылка)

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

Загрузка ...

Шустрый

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

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

Ситуация - нужно построить главный блок допустим 400х400.
Внутри главного - два блока 50х50. Один должен находиться вверху слева, второй внизу справа.
И весь текст, который находиться внутри главного блока должен обтекать остальные блоки.

Блоки - обязательно DIV.

R.M.

Дата 5.5.2006, 11:54 (ссылка)

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

Загрузка ...

Анархист

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

Репутация: 9
Всего: 30

Млин у меня неполучается. Подожди пока dm9 сюда заглянет. Уверен он найдёт выход smile

P.S. восхищюсь тем человеком кто это осилит!

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

R.M.

Дата 10.5.2006, 11:41 (ссылка)

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

Загрузка ...

Анархист

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

Репутация: 9
Всего: 30

Расскажи поподробнее что должно быть в дивах? И могут ли он и быть span'ами? Впринципе есть идеи решения

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

Replicator

Дата 12.5.2006, 16:56 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 121
Регистрация: 30.4.2006
Где: Outer Heaven

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

У меня 1 вариант - таблица с 2 строками и 2 колонками. Но придется и текст дробить на 2 блока.

Наверное, как-то можно это сделать...

А как вообще обтекание дива сделать? После него же обычно перевод строки проставляется.

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

R.M.

Дата 12.5.2006, 17:06 (ссылка)

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

Загрузка ...

Анархист

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

Репутация: 9
Всего: 30

Цитата(Replicator @ 12.5.2006, 17:56

)

У меня 1 вариант - таблица с 2 строками и 2 колонками. Но придется и текст дробить на 2 блока.

Таблицы как я понял не катят.

Цитата(Replicator @ 12.5.2006, 17:56

)

А как вообще обтекание дива сделать? После него же обычно перевод строки проставляется.

Код


Текст текст<br>
<div style='display: inline; border: 1px solid red;'>текст дива</div> текст текст текст <br> ещё текст

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

Replicator

Дата 13.5.2006, 17:20 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 121
Регистрация: 30.4.2006
Где: Outer Heaven

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

Спасибо.

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

jsse

Дата 14.5.2006, 22:06 (ссылка)

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

Загрузка ...

Шустрый

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

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

Цитата(Куксикус @ 10.5.2006, 11:41)

Расскажи поподробнее что должно быть в дивах? И могут ли он и быть span'ами? Впринципе есть идеи решения

Вобщем может быть и span-ами. Главное, чтоб не было таблиц.

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