Mantener una imagen flotando en el interior del div con CSS

Question

estoy teniendo este problema, igual que siempre, pero nunca tratar de encontrar la solución correcta

código:

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

Pregunta: ¿Cómo guardo la foto dentro del DIV? con la línea separadora debajo de la foto

Answer 1

La forma más tradicional (que no sea la limpieza) es para establecer la propiedad de desbordamiento del div que contiene al oculto.

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

En ocasiones, IE6 no respeta la configuración y debe recurrir al hack de cLFlaVA.

Answer 2

Una manera rápida y sucia de hacerlo sería también hacer flotar el div que contiene.

Answer 3

La flotación de un elemento lo quita del flujo del documento, por lo tanto, no ocupará espacio en el flujo general al representar en la pantalla. Hay otras maneras de manejar esto, pero aquí hay un truco:

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

Agregar <div style="clear:both;"></div> es un truco completo y mata su capacidad de cambiar de opinión en una fecha posterior. La solución correcta es usar css puro con overflow: hidden; o zoom: 1;.

Sin embargo, hay un poco más de eso que solo agregar desbordamiento: oculto, ya que también deberá asegurarse de que el bloque contenedor también tenga una atribución de ancho.

También me gustaría señalar que en la pregunta anterior y en la respuesta aprobada, ¿de qué sirve flotar la imagen en primer lugar si se le dice inmediatamente al texto que la borre?

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

Answer 5

que tenía un problema similar aquí donde mis imágenes se desbordaban mi div:

< div id = "oferta"> clase < div = "interior"> < img src =" offer.png "alt =" ">

donde tuve que hacer flotar mi imagen: derecha; para que el texto aparezca en el lado izquierdo y llene el espacio. No pude entender por qué diablos se desbordaría así, pero el método "rápido y sucio" de tj111 de hacer #offer {float: left/right/upmycornhole;} resolvió totalmente el problema, y ​​no reposicionó el div desde el div que contiene está dentro de un contenedor que lo mantiene en su lugar en la página.

Gracias tj eres un salvavidas!