Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Позиционирование блоков DIV


Автор: jsse 1.5.2006, 18:41
Подскажите - как сделать, чтоб текст обтекал блоки 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
Код
display: inline;
 

Автор: jsse 2.5.2006, 11:31
Цитата

   display: inline;


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

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

Автор: R.M. 2.5.2006, 12:18
Сори не вглядывался в код. Щас посмотрел, могу сказать что обтикания небудет т.к. идёт наложение слоем на текст. А чтобы было обтикание надо их разместить на одну плоскость т.е. position: relative; но при display: inline; перестанут работать размеры. Вообщем было бы проще если бы было понятно для чего это smile Вообщем попробуй убери absolute, спозиционируй div'ы как надо (внутри .main) и там уже будет видно 

Автор: jsse 2.5.2006, 15:23
Цитата(Куксикус @  2.5.2006,  12:18 Найти цитируемый пост)
Вообщем попробуй убери absolute, спозиционируй div'ы как надо (внутри .main) и там уже будет видно  

 smile 

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

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

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

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

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

Автор: R.M. 5.5.2006, 11:54
Млин у меня неполучается. Подожди пока dm9 сюда заглянет. Уверен он найдёт выход smile 
P.S. восхищюсь тем человеком кто это осилит! 

Автор: R.M. 10.5.2006, 11:41
Расскажи поподробнее что должно быть в дивах? И могут ли он и быть span'ами? Впринципе есть идеи решения 

Автор: Replicator 12.5.2006, 16:56
У меня 1 вариант - таблица с 2 строками и 2 колонками. Но придется и текст дробить на 2 блока.

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

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

Автор: R.M. 12.5.2006, 17:06
Цитата(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
Спасибо. 

Автор: jsse 14.5.2006, 22:06
Цитата(Куксикус @ 10.5.2006,  11:41)
Расскажи поподробнее что должно быть в дивах? И могут ли он и быть span'ами? Впринципе есть идеи решения

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)