CSS: la Force de flotteur de faire une toute nouvelle ligne de
J'ai un tas de float: left
éléments et certains sont un peu plus grands que d'autres. Je veux que le saut de ligne à la pause et les images flottent tout le chemin à gauche au lieu de rester bloqué sur un plus grand élément.
Voici la page que je suis en train de parler : lien
Si elles sont toutes de la même taille si fonctionne à merveille : lien
Merci! (Je préfère ne pas entrer dans le javascript ou des scripts côté serveur si je n'ai pas d')
Vous devez vous connecter pour publier un commentaire.
Bien, si vous avez vraiment besoin d'utiliser
float
déclarations, vous avez deux options:clear: left
sur la gauche - la con, c'est que vous aurez un nombre fixe de colonnesheight
- soit par script ou coder en dur la hauteur dans le CSSCes deux sont la limitation, parce qu'ils travaillent autour de la façon dont les flotteurs de travail. Cependant, vous pouvez envisager d'utiliser
display: inline-block
au lieu defloat
, qui permettront de réaliser la mise en page similaire. Vous pouvez alors ajuster leur alignement à l'aide devertical-align
.Je l'ai corrigé en supprimant
float:left
, et l'ajout dedisplay:inline-block
à la place. Ne l'ai pas utilisé pour les images, mais devrait fonctionner correctement, là, aussi.<div>
ou<li>
d'abstraction). Sachez que vous pouvez également utiliservertical-align:top
. Par défaut est de s'aligner sur le fond, ce qui peut sembler un peu étrange si les cases sont des différences significatives de taille (qui encore une fois, ils sont dans mon cas).display:inline-table
qui a le mieux fonctionné pour moi, merci pour l'astuce 🙂inline-block
est qu'une bonne méthode lorsque vous minifier vos fichiers html.Utilisation
display:inline-block
Vous pouvez également trouver
vertical-align: top
ouvertical-align:middle
utile.C'est ce que j'ai fait. Semble fonctionner en forçant une nouvelle ligne, mais je ne suis pas en html/css gourou par toute mesure.
Vous pouvez les envelopper dans un div et de donner la div un ensemble de largeur (la largeur de l'image la plus large + marge peut-être?) et puis flotter les divs. Ensuite, définissez les images au centre de leur contenant des divs. Vos marges entre les images ne seront pas compatible pour les images de tailles différentes, mais il va poser beaucoup plus de bien sur la page.
C'est un vieux post et les liens ne sont plus valables, mais parce qu'il est venu au début d'une recherche que je faisais, je pensais que je doit faire des commentaires pour aider les autres à mieux comprendre le problème.
Par l'aide du flotteur vous demandez au navigateur pour organiser vos commandes automatiquement. Il répond par emballage lorsque les commandes ne correspondent pas à la largeur de leur float arrangement. float:left, float:right ou clair:gauche,claire:droit,clear:both.
Donc, si vous voulez forcer un tas de float:left éléments de flotter de manière uniforme dans une colonne de gauche, puis vous avez besoin pour rendre le navigateur décider à enrouler/dérouler à la même largeur. Parce que vous ne voulez pas le faire n'importe quel script, vous pouvez envelopper tous les contrôles que vous voulez faire flotter ensemble dans une même div. Vous souhaitez ajouter un nouvel habillage de div avec une classe comme:
html
Cette div sera automatiquement ajustée à la largeur de l'image la plus grande et toutes les images seront flottait à gauche avec la div de tous les temps (sans emballage).
Si vous voulez continuer à vous envelopper, vous pouvez donner à la div de largeur comme largeur:30% et les images de l'float:left; style. Plutôt que de s'y adapter le plus grand de l'image varie en taille et en permettent le contenu des images pour l'envelopper.
Ajouter à
.icons div {width:160px; height:130px;}
fonctionnera très bienEspère que ça aidera