effacer les flottants imbriqués

Question

Je crée une grille en mosaïque d'images, comme une galerie d'images avec une grille de vignettes, et j'ai besoin que les images s'enroulent sur la rangée suivante après 3 images. Donc, je suis en train de faire flotter un groupe de divs qui contiennent chacun une image et ensuite effacer le flotteur manuellement après trois images.

Le problème est que je travaille dans un modèle existant plutôt compliqué qui utilise déjà float pour tout arranger. Effacer le flottant dans ma grille brouille toute la page, vraisemblablement parce que c'est effacer tous les flotteurs dans la page jusqu'à présent. Que puis-je faire?

Je vide le flotteur en insérant un div blanc. ie:

<div style='clear:right'> 

L'un des autres procédés de nettoyage des flotteurs pourrait-il mieux fonctionner?

Answer 1

Si votre balisage est comme ceci:

div 
img 
img 
img 
row break 
img 
img 
img 
... 

Ensuite, vous devez ajouter ceci après tous les trois blocs:

<br class="clear" /> 

Mais si votre balisage est comme ceci:

div 
div 
    img 
    img 
    img 
div 
    img 
    img 
    img 
... 

..puis il vous suffit d'appliquer la classe .clear suivante à vos DIVs internes.

Quoi qu'il en soit, l'ajouter à votre feuille de style:

.clear:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
* html .clear { height: 1%; } 
*:first-child+html .clear { min-height: 1px; } 

Vous pouvez utiliser cette classe pour tous les autres éléments qui contiennent des flotteurs.

Answer 2

Si la prise en charge d'IE> = 8 vous convient, vous pouvez envisager d'utiliser display: table au lieu de floats. Puisque vous voulez afficher une grille, c'est la façon la plus appropriée de le faire.

http://www.quirksmode.org/css/display.html#table

Answer 3

Je vais essayer d'utiliser display: inline-block; de style les éléments contenant chaque image. Exemple de code HTML pour un conteneur:

 
<style> 
.figure { 
    display: inline-block; 
} 
</style> 

<div class="figure"> 
    <img src="littlepony.jpg" alt="My cute little pony" width="13" height="37" /> 
</div> 

Maintenant, il y a quelques pièges en utilisant cela avec IE6, IE7 et Firefox 2:

• IE 6 et 7 ne fera que les éléments en ligne de style qui ont hasLayout déclenché , je veux dire que vous verrez le comportement inline-block si vous faites ceci:

 
<!--[if lte IE 7]> 
.figure { 
    display: inline; 
    zoom: 1; /* triggering hasLayout */ 
} 
<![endif]--> 

• Firefox 2 ne comprend pas display: inline-block; vous devrez donc précéder celle-ci par une autre instruction d'affichage:

 
.figure { 
    display: -moz-inline-stack; 
    display: inline-block; 
} 

• maintenant Firefox 2 va vous embêter un peu. Tout d'abord, vous devez avoir un seul élément enfant dans votre élément .figure, sinon les enfants ...empiler. Donc, si vous avez une légende sous l'image, insérez un div entre div.figure et img + p

 

    <div> 
     <img src="littlepony.jpg" alt="Photo of my cute little pony" width="13" height="37" /> 
     <p>Second child of .figure>div and not .figure</div> 
    </div> 
</div> 

deuxième (encore que dans Fx2), vous remarquerez de temps en temps que vous pouvez » Ne sélectionnez plus le texte à l'intérieur de l'élément -moz-inline-stack'ed et ne cliquez plus sur les liens qu'il pourrait contenir. La solution est de positionner la div ajoutée relativement:

 
    .figure div { 
     position: relative; 
    } 

Bien sûr, le commentaire conditionnel pour IE6/7 doit se produire après CSS normal, sinon il sera de peu d'aide.

Enfin, si aucune solution élégante ne vous convient, utilisez une TABLE. Une table simple avec seulement td et non th. Si elle se produit que:

• IE6 et 7 n'aiment pas display: table-sth
• votre CMS cause des problèmes à ce qui serait autrement fonctionner correctement sur un autre site
• Firefox 3 pour le soutien inline-block est d'aucune aide

que oui, il vaut mieux pour tout le monde que vous utilisez une table et aucun problème provoquant une demi-solution à la moitié de vos utilisateurs;)

Answer 4

1. Créer un div conteneur approprié (si vous ne possédez pas déjà un)
2. Définir une largeur restrictive sur le conteneur div - égalant les mêmes que 3 images reprend. Autoriser toutes les images à flotter - elles automatiquement envelopper.
3. Définissez le conteneur div avec 'débordement: caché', ce qui effacera les flotteurs pour vous.

Une version simplifiée pourrait ressembler à ceci:

<style> 

div#container { 
    overflow: hidden; 
    width: 300px; 
} 

div#container img { 
    float: left; 
    width: 100px; 
} 

</style> 

<div id="container"> 

    <img src="" /> 
    <img src="" /> 
    <img src="" /> 


    <img src="" /> 
    <img src="" /> 
    <img src="" /> 


    <img src="" /> 
    <img src="" /> 
    <img src="" /> 

</div>