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

Question

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

код:

 <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? с разделительной линией под фотографией

Answer 1

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

<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.

Answer 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>

Answer 3

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

Answer 4

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

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

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

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

Answer 5

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

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

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