Сохранение плавающего изображения внутри div с помощью CSS

У меня такая проблема, как всегда, но никогда не пытайтесь найти правильное решение

код:

 <div id="ListOfTextAndPhotos">
      <div style="border-bottom: solid 1px silver;">
          <img src="photo.jpg" style="float: left">
          Some text about the photo
      </div>
      <div style="border-bottom: solid 1px silver;">
          <img src="photo2.jpg" style="float: left">
          Some text about the photo2
      </div>
      <div style="border-bottom: solid 1px silver;">
          <img src="photo3.jpg" style="float: left">
          Some text about the photo3
      </div>
  </div>

Вопрос: Как сохранить фотографию внутри DIV? с разделительной линией под фотографией

ОТВЕТЫ

Ответ 1

Более традиционным способом (кроме очистки) является установка свойства переполнения содержащего div скрытого.

<div style="border-bottom: solid 1px silver; overflow: hidden;">
      <img src="photo3.jpg" style="float: left">
      <div>Some text about the photo3</div>
</div>

Иногда IE6 не соблюдает настройки, и вам приходится прибегать к взлому cLFlaVA.

Ответ 2

Плавающий элемент выводит его из потока документа, поэтому он не занимает места в общем потоке при рендеринге на экране. Существуют и другие способы обращения с этим, но здесь взломать:

 <div id="ListOfTextAndPhotos">
      <div style="border-bottom: solid 1px silver;">
          <img src="photo.jpg" style="float: left">
          <div style="clear:both;">Some text about the photo</div>
      </div>
      <div style="border-bottom: solid 1px silver;">
          <img src="photo2.jpg" style="float: left">
          <div style="clear:both;">Some text about the photo2</div>
      </div>
      <div style="border-bottom: solid 1px silver;">
          <img src="photo3.jpg" style="float: left">
          <div style="clear:both;">Some text about the photo3</div>
      </div>
  </div>

Ответ 3

Быстрый и грязный способ сделать это - это поместить также содержащий div div.

Ответ 4

Добавление <div style="clear:both;"></div> - это полный взлом и убивает вашу способность изменить свое мнение позже. Правильные решения - использовать чистый css с overflow: hidden; или zoom: 1;.

Однако, это немного больше, чем просто добавление переполнения: скрытое, поскольку вам также нужно убедиться, что содержащийся блок также имеет атрибут ширины.

Я также хотел бы отметить, что в вышеприведенном вопросе и одобренном ответе, в чем смысл плавания изображения в первую очередь, если текст сразу же предлагается очистить его?

http://www.quirksmode.org/css/clearing.html

Ответ 5

У меня была аналогичная проблема, когда мои изображения переполняли мой div:

< div id = "offer" >  < div class= "внутренний" >  < img src= "offer.png" alt="" >

где я должен был иметь мое изображение float: right; так что текст появится с левой стороны и заполнит пробел. Я не мог понять, почему черт он так переполнится, но tj111 "быстрый и грязный" способ сделать #offer {float: left/right/upmycornhole;} полностью решил проблему и не изменил положение div с содержащий div находится внутри обертки, которая удерживает его на месте на странице.

Спасибо, что ты спасатель жизни!