Immagine va al di là del contenitore limiti div

Question

qualcuno può dare un'occhiata al seguente violino: http://jsfiddle.net/R4bCy/1/

ho pensato che un div dovrebbe regolare è l'altezza in modo da accogliere è elementi, a meno che gli elementi sono posizionati in modo assoluto.

Perché il div non si espande a tutta altezza dell'immagine?

Ho bisogno che l'immagine sia allineata a destra. L'unico modo in cui so come farlo è align='right', position:absolute; right: 0; e float:right, che rendono il div contenitore non regolare la sua altezza all'altezza dell'immagine.

Answer 1

.intro { 
margin: 10px; 
outline: 1px solid #CCC; 
background: #A00; 
color: #FFF; 
height:auto; 
overflow:auto; 
} 
​.img{ 
float:right; 
height:auto; 
}​ 

<div class="intro"> 
    <div class="img"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg" style="margin: 10px 10px; "/></div> 

    <p>Sorry, but the page you requested could not be found.</p> 
</div>​​​​​​​​​​ 

DEMO

Answer 2

Whoops, scuse, pubblicato e hai modificato la tua domanda - l'allineamento a destra è fluttuante credo (si dovrebbe invece usare float: a destra e un clearfix di qualche tipo).

esempio: http://jsfiddle.net/R4bCy/5/

Answer 3

Quello che dovete fare è aggiungere dopo il tag p,

<div style="clear:both;"></div> 

Answer 4

Questo è quello che ti credo voglia: http://jsfiddle.net/R4bCy/6/

Se vuoi Ed il testo a sinistra e l'immagine galleggiava a destra, si prega di fare questo è il vostro CSS: http://jsfiddle.net/R4bCy/15/

Si può anche avere due div s che hanno una larghezza di 50% contenuta all'interno di un contenitore div. Questo vi permetterà di un po 'più di flessibilità nella posizione dell'immagine in quanto il testo e l'immagine hanno ciascuno le proprie modificabili div s con attributi indipendenti

Answer 5

'Perché il div si espande per tutta l'altezza dell'immagine ?'

Poiché i float si sovrappongono ai blocchi, solo i contesti di formattazione di blocchi contengono float. (È possibile trovare una buona panoramica di tutto il tema qui: http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/)

On per risolvere il problema a portata di mano:

Il align=right sarà effettivamente comportare l'img essere float: right (l'attributo align è deprecato e css dovrebbe essere usato).

per contenere l'immagine galleggiava nel suo genitore div è necessario né avere il genitore div stabilire un contesto di formattazione a blocchi (block contesti di formattazione racchiudono carri nidificate) o esplicitamente cancellare il galleggiante con un ulteriore elemento dopo la img che viene designato come clear: right.

Una soluzione semplice per creare un contesto di formattazione a blocchi è galleggiare il genitore div pure, anche se la soluzione preferita in questo caso sarebbe impostare semplicemente il suo overflow a hidden (risultanti anche in un contesto di formattazione a blocchi).

Scopri il violino aggiornato http://jsfiddle.net/R4bCy/8/.