CSS: "float: left" ne fonctionne pas comme prévu

Je veux afficher 2 colonnes d'images en utilisant "float: left", et je ne sais pas pourquoi la 3ème image est sur la droite.CSS: "float: left" ne fonctionne pas comme prévu

Voir capture d'écran: http://dl.dropbox.com/u/72686/imagesFloat.png

Voir HTML:

 <div class="field-item odd"> 
        <img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%202.png" title=""><br> 
<span>description1</span>  </div> 
       <div class="field-item even"> 
        <img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%203.png" title=""><br> 
<span>description2</span>  </div> 
       <div class="field-item odd"> 
        <img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%204.png" title=""><br> 
<span>description3</span>  </div> 
       <div class="field-item even"> 
        <img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%205.png" title=""><br> 
<span></span>  </div>

voir CSS:

.field-field-image .odd { 
padding-right:20px; 
} 
.field-field-image .even { 
padding-left:20px; 
} 

.field-field-image .field-item { 
float:left; 
}

grâce

Source

2010-04-26 aneuryzm

Il est à droite, car il y a de la place à côté du premier div .

Utilisez clear: left sur chaque élément que vous souhaitez démarrer une nouvelle ligne.

Source

2010-04-26 08:38:13 Quentin

Vous pouvez également donner à chaque '.field-item' une hauteur fixe. – akamike

Bien que cela a tendance à se casser si la taille de la police change (même si la police change (parce que l'utilisateur n'a pas le premier choix installé) à l'une des dimensions légèrement différentes. – Quentin

Ajoutez margin-bottom:2px à la troisième image, voir si l'image va n'importe où. Si ce n'est pas margin-bottom, margin-top alors.

Source

2010-04-26 08:38:20

CSS: "float: left" ne fonctionne pas comme prévu

Répondre

Questions connexes