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


Автор: VVp 22.9.2004, 13:24
Есть такой код
<img src=1.gif style='float:left'> Текст1
<img src=2.gif style='float:left'> Текст2

Если Текст1 небольшой, а окно браузера развернуто, то вторая картинка тоже начинает обтекать первую вместе с текстом1. Вопрос, как этого избежать? Заранее спасибо.

Автор: Caramel 22.9.2004, 13:32
Может просто использовать <br> или разложить картинки в две разные ячейки? smile.gif

Автор: VVp 22.9.2004, 14:32
Да, про ячейки чето-то я не подумал, туплю smile.gif
а <br> не подходит, т.к. если окно маленькое, расстояние между картинками большое получается

Автор: Се ля ви 22.9.2004, 16:53
Делаешь так:
Код
<div style="float: left;">
   <img src="1.gif" /><br />
   <img src="2.gif" />
</div>
Текст1, Текст 2...

и всё нормально работает)

Автор: VVp 27.9.2004, 13:12
Нет так нельзя, Текст1 относится к img1, Текст2 к img2, а не 2 текста к двум рисункам.
Короче распихал все по отдельным ячейкам, правда хотелось как-то поэлегантнее.

Автор: GoodBoy 27.9.2004, 13:27
VVp
Табличная верстка - вполне хорошее решение данной проблемы!!! :-))))

Автор: Arien 12.7.2007, 21:23
Ребята, проблема точно такая же. Имеется два дива, первый содержит картинку (float:left) и текст. Если в первом диве текста немного, текст из второго дива начинает обтекать картинку из первого. Проявляется только в Firefox. Нужно, чтобы второй див не обтекал картинку первого.

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

Надеюсь на помощь опытных верстальщиков smile.

Автор: WebDisaster 12.7.2007, 21:29
А если второй div не float'ить, а назначить ему padding слева, равный ширине первого div'а? 

Автор: Uratsakidogi 13.7.2007, 01:26
Я конечно может чего-то не вкурил, но чем clear плох? smile

Автор: Arien 14.7.2007, 21:49
Проблема решена. В IE, FF, Opera работает нормально только при таком коде:

Код

div.content{
  display: table;/*если использовать только эту строку, эффект есть только в FF, и то неожиданный :)*/
  clear: both;/*само по себе не работает, вместе с первой строкой работает нормально, кроме IE*/
  height:1%;/*специально для IE*/
}


Спасибо за советы.

Автор: SelenIT 14.7.2007, 22:22
Присоединяюсь к недоумению Uratsakidogi...
Код

<div>
<img style="float: left;" src="picture.gif">
Текст текст текст текст текст
</div>
<div style="clear: left;">
Текст текст текст текст текст Текст текст текст текст текст Текст текст текст текст текст Текст текст текст текст текст Текст текст текст текст текст Текст текст текст текст текст Текст текст текст текст текст Текст текст текст текст текст
</div>

Зачем еще какие-то сложности?

Автор: Uratsakidogi 14.7.2007, 23:07
SelenIT, только вместо дивов правильнее наверное р.)

Автор: SelenIT 14.7.2007, 23:23
Uratsakidogi, в данном примере - согласен. А в исходнике у Arienа - кто его знает... вдруг там внутри еще какой блочный контент есть?

Автор: Arien 14.7.2007, 23:55
Специально перепроверила. Clear сам по себе не работает.

Привожу фрагмент html-кода, возможно это прояснит ситуацию:

Код

<div class="content">
    <p><img ... ALIGN="left" SRC="..." />Текст</p>
 </div>

  <div>
     Тут ерунда всякая, а потом еще пару дивов
  </div>
    
   <div class="content">
      А это див, который обтекал картинку из первого дива
   </div>
    


Дело в лишних дивах, находящихся между ними?

Автор: SelenIT 15.7.2007, 00:11
Arien, а CSS Ваш покажите, а лучше дайте ссылку на реальную страницу (если возможно). Что-то загадочное у Вас творится smile.

Или попробуйте составить минимальный пример, где обтекание сохранялось бы при наличии clear и без хаков с высотой и прочих нетривиальных вещей...

Автор: Arien 15.7.2007, 01:38
Ссылку на сайт дать не могу пока, извините. Могу дать кусок css-ника, если это поможет разобраться:

Код


div.content p a {
  border-bottom: 1px solid #3131c0;
}

div.content p a:hover{
  border-bottom: 1px solid #3131c0;
  color: #3131c0;
}

div.content{
  display: table;
  clear: both;
  height:1%;
}

div.node div.content .book-navigation {
  background: #eee;
  margin:0;
  padding:0;
  overflow:hidden;
}

div.node div.content .book-navigation ul.menu {
  border:0;
  border-top:1px solid #2763A5;
  margin:0;
  padding-bottom:10px;
}

div.node div.content .book-navigation .page-links{
  background: #C1D4EA;
  border:1px solid #2763A5;
  border-width:1px 0 1px 0;
  padding:5px;
  margin:0;
}



Тут, скорее всего, много лишнего smile. Это немного модифицированный css-ник (точнее его часть) темы Bluebreeze для Drupal. Фрагмент html-кода, который использует этот css, был приведен выше в сокращенном варианте. Могу дать более полный вариант:

Код


<div class="content">
    <p><img WIDTH="200" HEIGHT="150" BORDER="0" ALIGN="left" SRC="/files/u1/vladstudio_skiing_1152x864_0.jpg" />Текст.</p>
  </div>

  
      <div class="links">
      <ul class="links inline"><li class="first last node_read_more"><a href="/articles/9" title="Читати далі." class="node_read_more">Read more</a></li>
</ul>    </div>
    
</div>
<div class="node" id="node-5">
      <h2 class="title">
      <a href="/articles/5">Идеологический политический процесс в современной России: политическое учение Руссо или социальная парадигма?</a>
    </h2>

  
    
  
    <div class="meta with-taxonomy">
  
          <div class="submitted">
      8 липня 2007      </div> 
        
     
      <div class="taxonomy"><ul class="links inline"><li class="first last taxonomy_term_1"><a href="/taxonomy/term/1" rel="tag" title="" class="taxonomy_term_1">Статті</a></li>
</ul></div>
        
  </div>
    
  <div class="content">
    <p><img src="/files/u1/IMG_0467.jpg" align="left" border="0" height="150" hspace="3" vspace="3" width="200" />Либеральная теория, несмотря на внешние воздействия, категорически обретает авторитаризм, что было отмечено П. Лазарсфельдом. Политическая культура символизирует механизм власти, утверждает руководитель аппарата Правительства.</p>

  </div>
  <!-- И так далее... Последний div обтекал картинку из первого -->

Автор: SelenIT 15.7.2007, 01:51
Arien, так проблема в том, что <div class="links"> и последующие дивы обтекают картинку из предшествующего <div class="content">? Если так, то она решается с помощью
Код

div.links {
  clear: left;
}

Автор: WebDisaster 15.7.2007, 11:02
У меня складывается устойчивое ощущение, что задачу все понимают по-разному. 

У меня, например, сложилось впечатление, что div1 должен быть слева, а div2 - справа от div1 (что бывает если div1, div2 {float: left} при фиксированной ширине div, как и показывал в своём примере топикстартер). А clear спасает положение только в том случае, если div2 выводится ниже div1. 

Что ещё раз говорит о том, что бессмысленно что-то советовать, не видя макета.

Автор: SelenIT 15.7.2007, 11:10
WebDisaster, осмелюсь заметить, что
  • последние три года тут решают немного не ту задачу, что у топикстартера;
  • ни в той, ни в другой задаче в упор не наблюдается div1, div2 {float: left} (!)
Что ещё раз говорит о том, что бессмысленно что-то советовать, не прочитав внимательно топик;)

Автор: WebDisaster 15.7.2007, 11:14
Цитата(SelenIT @ 15.7.2007,  11:10)
бессмысленно что-то советовать

ОК! Советовать больше не буду :(

Автор: SelenIT 15.7.2007, 11:22
WebDisaster, зачем же так радикально... Советуйте на здоровье - только будьте, плиз, впредь повнимательнее;)

Автор: Arien 15.7.2007, 11:48
Ребята, в том, что понимание проблемы у всех разное, моя вина  smile .

Картинка из самого первого дива должна обтекаться всеми дивами, кроме последнего (который, как и первый, <div class="content">). Проблема уже решена, хотя, возможно, и извращенным способом smile.

Спасибо вам за участие ;).

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