Avantages de l'utilisation de display: inline-block vs float: left in CSS
normalement, quand nous voulons avoir plusieurs DIVs
d'affilée, nous utiliserions float: left
, mais maintenant j'ai découvert le truc de display:inline-block
exemple de lien ici .
Il me semble que display:inline-block
est une meilleure façon de align
DIVs
d'affilée, mais y a-t-il des inconvénients? Pourquoi cette approche est-elle moins populaire que le float
?
5 réponses
en 3 mots: inline-block
est mieux.
Bloc En Ligne
le seul inconvénient de l'approche display: inline-block
est que dans IE7 et ci-dessous un élément ne peut être affiché inline-block
que s'il était déjà inline
par défaut. Cela signifie qu'au lieu d'utiliser un élément <div>
, vous devez utiliser un élément <span>
. Ce n'est pas vraiment un énorme inconvénient parce que sémantiquement un <div>
est pour diviser la page alors qu'un <span>
est juste pour couvrir une portée d'une page, donc il n'y a pas une énorme différence sémantique. Un avantage énorme de display:inline-block
est que lorsque d'autres développeurs maintiennent votre code à un point ultérieur, il est beaucoup plus évident ce que display:inline-block
et text-align:right
essaie d'accomplir qu'une déclaration float:left
ou float:right
. Mon avantage préféré de l'approche inline-block
est qu'il est facile à utiliser vertical-align: middle
, line-height
et text-align: center
pour centrer parfaitement les éléments, d'une manière intuitive. J'ai trouvé un super blog sur la façon de mettre en œuvre la croix-navigateur inline-block, sur le Mozilla blog . Voici le "compatibilité de navigateur .
Float
la raison pour laquelle l'utilisation de la méthode float
n'est pas appropriée pour la mise en page de votre page est que la float
propriété CSS était à l'origine destiné uniquement à ce que le texte s'enroule autour d'une image (Style magazine) et n'est pas, de par sa conception, le mieux adapté aux fins de mise en page générale. Lors du Changement des éléments flottants plus tard, parfois vous aurez des problèmes de positionnement car ils ne sont pas dans le flux de page . Un autre inconvénient est qu'il nécessite généralement un clearfix sinon il peut casser des aspects de la page. Le clearfix nécessite d'ajouter un élément après les éléments flottants pour arrêter leur parent de s'effondrer autour d'eux qui croise la ligne sémantique entre le style de séparation du contenu et est donc un anti-modèle dans le développement web .
tout problème d'espace blanc mentionné dans le lien ci-dessus pourrait facilement être corrigé avec la propriété white-space
CSS.
Edit:
SitePoint est une source très crédible pour les conseils de conception web et ils semblent avoir la même opinion que moi:
si vous êtes nouveau dans les maquettes CSS, vous seriez pardonné de penser que utiliser les flotteurs CSS de façon imaginative est la hauteur de la compétence. Si vous ont consommé autant de CSS tutoriels de mise en page que vous pouvez trouver, vous pourriez supposons que la maîtrise des flotteurs soit un rite de passage. Vous serez ébloui grâce à l'ingéniosité, étonné par la complexité, et vous gagnerez un sens de la réussite quand vous comprenez enfin comment flotte travail.
ne vous y trompez pas. Vous êtes un lavage de cerveau.
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts /
2015 mise à Jour - Flexbox est une bonne alternative pour les navigateurs modernes :
.container {
display: flex; /* or inline-flex */
}
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Dec 21, 2016 Mise à jour
Bootstrap 4 supprime le support pour IE9, et ainsi se débarrasse des flotteurs des lignes et va Flexbox plein.
bien que je convienne qu'en général inline-block
est mieux, il y a une chose supplémentaire à prendre en compte si vous utilisez les largeurs en pourcentage pour créer une grille réactive (ou si vous voulez des largeurs parfaites en pixel):
si vous utilisez inline-block
pour les grilles qui totalisent 100% ou près de 100% de largeur, vous devez vous assurer que votre balisage HTML contient pas d'espace blanc entre les colonnes .
avec flotteurs, ce n'est pas quelque chose que vous devez vous soucier - les colonnes flottent au-dessus de n'importe quel espace blanc ou autre contenu entre les colonnes. les réponses à cette question ont de bons conseils sur les façons de supprimer les espaces HTML sans rendre votre code laid .
si, pour une raison quelconque, vous ne pouvez pas contrôler le balisage HTML (par exemple un CMS restrictif), vous pouvez essayer les astuces décrites ici, ou vous pourriez avoir besoin de compromettre et d'utiliser des flotteurs à la place de inline-block. Il ya aussi laid CSS des trucs qui ne devraient être utilisés que dans des circonstances extrêmes, comme font-size:0;
sur le contenant de la colonne, puis appliquer de nouveau la taille de la police dans chaque colonne .
par exemple:
- voici une grille à 3 colonnes de 33,3% de largeur avec
float: left
. Cela "fonctionne" (mais l'emballage doit être nettoyé). - voici exactement la même grille, avec
inline-block
. L'espace entre les blocs crée un espace de largeur fixe qui pousse la largeur totale au-delà de 100%, brisant la disposition et provoquant la chute de la dernière colonne le long d'une ligne. - Voici la même grille, avec
inline-block
et aucun espace entre les colonnes dans le HTML . Il "fonctionne Juste" encore - mais le HTML est plus laid et votre CMS pourrait forcer une sorte de pré-justification ou indentation à sa sortie HTML ce qui rend difficile à réaliser en réalité.
si vous voulez aligner le div
avec la précision de pixel, puis utiliser float. inline-block
semble toujours vous demander de couper quelques pixels (au moins en IE)
il y a une caractéristique au sujet du bloc en ligne qui peut ne pas être simple cependant. C'est-à-dire que la valeur par défaut pour vertical-align dans CSS est baseline. Cela peut causer un comportement d'alignement inattendu. Regardez cet article.
http://www.brunildo.org/test/inline-block.html
au lieu de cela, lorsque vous faites un float:left, les divs sont indépendants les uns des autres et vous pouvez les aligner en utilisant la marge facilement.