2010-08-09 4 views
5

je suis en train de faire quelque chose comme:css: image flottante à gauche - problème

-------------------------------------------- 
| --------- text text text text text text | 
| | image | text text text text text text | 
| |  | text text text text text text | 
| |  | text text text text text text | 
| --------- text text text text text text | 
| text text text text text text text text | 
| text text text text text text text text | 
-------------------------------------------- 

le balisage doit être droite:

<div> 
    <img src='myimage.jpg' style='float:left;'> 
    tex text text .. 
</div> 

le problème est - s'il n'y a que quelques texte, l'image « flotter » du conteneur div, qui ressemble à ceci:

-------------------------------------------- 
| --------- text text text text text text | 
| | image | text text text text text text | 
|_|  |________________________________| 
    |  | 
    --------- 

des idées pour résoudre ce problème? la seule solution pour moi semble régler la hauteur minimale du conteneur div. thx

Répondre

5
div { 
    overflow: hidden; /* except IE6 */ 
    display: inline-block; /* IE6 */ 
} 
div { 
    display: block; /* IE6 */ 
} 
+0

bien! Merci beaucoup! – Fuxi

3

ajouter un élément vide à la fin de l'élément div avec style="clear:both;, comme ceci:

<div> 
    <img src='myimage.jpg' style='float:left;'> 
    tex text text .. 
    <div style="clear:both;"></div> 
</div> 
+0

Cette solution est également valide, bien qu'elle complique le balisage. J'ai rencontré des cas où le truc de débordement ne convient pas à mes besoins, et un 'div' avec' clear: both' est nécessaire. –

+0

@RyanKinal Utilisez clearfix alors. – pilau

1

< div style = "overflow: auto" > </div >