web-dev-qa-db-fra.com

CSS: Forcer float à faire une nouvelle ligne

J'ai un tas de float: left éléments et certains sont légèrement plus gros que d’autres. Je veux que la nouvelle ligne se casse et que les images flottent complètement à gauche au lieu de rester bloquées sur un élément plus important.

Voici la page dont je parle: link

Si elles ont toutes la même taille, si cela fonctionne à merveille: link

Merci! (Je préférerais ne pas entrer dans le javascript ou les scripts côté serveur si ce n'est pas nécessaire)

htmlcsscss-float
57
Paul Tarjan

Eh bien, si vous devez vraiment utiliser les déclarations float, vous avez deux options:

  1. Utilisation clear: left sur les éléments les plus à gauche - le problème est que vous aurez un nombre fixe de colonnes
  2. Rendre les éléments égaux dans height - soit par script, soit en codant en dur la hauteur dans le CSS

Ces deux facteurs sont limitants, car ils modifient le fonctionnement des flotteurs. Cependant, vous pouvez envisager d'utiliser display: inline-block au lieu de float, ce qui donnera la même présentation. Vous pouvez ensuite ajuster leur alignement en utilisant vertical-align.

83
Alex Gyoshev

Je l'ai corrigé en enlevant float:left, et en ajoutant display:inline-block au lieu. Je ne l'ai pas utilisé pour les images, mais devrait bien fonctionner, là aussi.

61
David Davepermen Spörri

Utilisation display:inline-block

Vous pouvez également trouver vertical-align: top ou vertical-align:middle utile.

5
optimiertes

C'est ce que j'ai fait. Semble travailler pour forcer une nouvelle ligne, mais je ne suis en aucun cas un gourou html/css.

<p>&nbsp;</p>
3
Alex

Vous pouvez les envelopper dans un div et donner à la div une largeur définie (la largeur de l'image la plus large + une marge peut-être?), Puis faire flotter les div. Ensuite, définissez les images au centre de leurs divs contenant. Vos marges entre les images ne seront pas cohérentes pour des images de tailles différentes, mais elles seront beaucoup plus jolies sur la page.

2
Evernoob

Ajouter à .icons div {width:160px; height:130px;} fonctionnera très bien

J'espère que ça va aider

0
Dom

Ceci est un ancien message et les liens ne sont plus valides, mais comme il a été mentionné tôt dans une recherche, je me suis dit que je devrais faire un commentaire pour aider les autres à mieux comprendre le problème.

En utilisant float, vous demandez au navigateur d'organiser vos contrôles automatiquement. Il réagit en encapsulant lorsque les contrôles ne correspondent pas à la largeur de leur disposition de flottement spécifiée. float: left, float: right ou clear: left, clear: right, clear: les deux.

Donc, si vous voulez forcer un ensemble d'éléments flottants: les éléments de gauche à flotter uniformément dans une colonne de gauche, vous devez faire en sorte que le navigateur décide de les enrouler/dérouler à la même largeur. Parce que vous ne voulez pas faire de script, vous pouvez envelopper tous les contrôles que vous voulez faire flotter dans une seule div. Vous voudriez ajouter une nouvelle division d'habillage avec une classe comme:

.LeftImages{
    float:left;
}

html

<div class="LeftImages">   
  <img...>   
  <img...> 
</div>

Cette div s'ajustera automatiquement à la largeur de la plus grande image et toutes les images seront laissées flottantes avec la div tout le temps (pas d'habillage).

Si vous souhaitez toujours les envelopper, vous pouvez donner à la div une largeur comme largeur: 30% et chacune des images le float: left; style. Plutôt que de s’adapter à la plus grande image, sa taille varie et permet aux images contenues de se dérouler.

0
codeasaurus