CSS Floating Div avec Image VS Floating Div avec Div ayant background-image

Question

Hallo J'ai un problème de Floating Div, que je ne peux pas comprendre.

Si j'écris un div avec la propriété float: left et une balise Image, les deux sont affichés dans une ligne. par exemple

<div style="background-image:url(calendar_container_bg.gif);background-repeat:repeat-x;width:670px;height:253px;border:1px solid #8E9EAB"> 
      <div style="height:36px"> 
       <div style="float:left;color:#01389F;font:bold 14px Arial;padding-left:20px;line-height:36px;width:614px;"> 
        Frühestes Anreisedatum. 
       </div> 
       <img src="calendar_close_btn.gif" style="padding-top:10px"> 
       <div style="clear:left"></div> 
      </div> 
      </div> 

Mais comme je repleace l'étiquette d'image avec un DIV ayant la même image que background-image, puis les deux DIV sera affiché sur deux lignes différentes. Je ne veux pas utiliser float: encore à gauche dans la seconde DIV.

Answer 1

img est un élément en ligne (comme du texte ou span), donc il va sur la même ligne que tous les autres éléments en ligne (qui se déplacent vers la droite si vous faites flotter un élément de bloc vers la gauche).

div est un élément de bloc, c'est-à-dire que chaque div obtient son propre espace vertical. Les seuls moyens d'obtenir deux div s en une ligne est:

1. flotter
2. Faites-les display: inline