Avantages de l'utilisation de display:inline-block vs float:left dans le CSS
Normalement, quand on veut avoir plusieurs DIVs
dans une rangée, nous serait d'utiliser float: left
, mais maintenant, j'ai découvert l'astuce de display:inline-block
Exemple de lien ici.
Il me semble que display:inline-block
est une meilleure façon de align
DIVs
dans une rangée, mais y at-il des inconvénients? Pourquoi cette approche est moins populaire, le float
truc?
- Cette questions est d'environ
inline
, pasinline-block
. Mais le premier connexes est bon: stackoverflow.com/a/11823622/918414 - double possible de float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
- exemple de lien est mort
Vous devez vous connecter pour publier un commentaire.
En 3 mots:
inline-block
est mieux.Inline Block
Le seul inconvénient de la
display: inline-block
approche est que, dans IE7 et en dessous d'un élément ne peut être affichéeinline-block
si elle était déjàinline
par défaut. Ce que cela signifie, c'est qu'au lieu d'utiliser un<div>
élément, vous devez utiliser un<span>
élément. Ce n'est pas vraiment un énorme inconvénient parce que sémantiquement un<div>
est de diviser la page en un<span>
est juste pour un laps de temps d'une page, donc il n'y a pas une énorme différence sémantique. Un énorme avantage dedisplay:inline-block
est que quand d'autres développeurs sont le maintien de votre code à un moment plus tard, il est beaucoup plus évident quedisplay:inline-block
ettext-align:right
essaye de faire qu'unfloat:left
oufloat:right
déclaration. Mon préféré profiter de lainline-block
approche est qu'il est facile à utiliservertical-align: middle
,line-height
ettext-align: center
de parfaitement centrer les éléments, de façon intuitive. J'ai trouvé un super blog sur la façon de mettre en œuvre la croix-navigateur inline-block, sur la Mozilla blog. Voici la compatibilité du navigateur.Float
La raison que l'utilisation de la
float
méthode n'est pas adaptée pour la mise en page de votre page est parce que lefloat
propriété CSS était initialement prévu uniquement pour avoir habillage de texte autour d'une image (style magazine) et est, de par sa conception, pas les mieux adaptés pour le général de mise en page fins. Lors de la modification flottait éléments plus tard, parfois, vous aurez des questions 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 les aspects de la page. Le clearfix nécessite l'ajout d'un élément après l'flottait éléments pour arrêter leur parent de s'effondrer autour d'eux qui traverse la sémantique de la ligne entre la séparation de style à partir du contenu et est donc un anti-modèle en développement web.Tout espace blanc, les problèmes mentionnés dans le lien ci-dessus peut être facilement fixé avec le
white-space
propriété CSS.Edit:
SitePoint est très crédible source pour la conception web conseils et ils semblent avoir la même opinion que je fais:
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
2015 mise à Jour - Flexbox est une bonne alternative pour les navigateurs modernes:
Plus d'infos
Dec 21, 2016 Mise À Jour
Bootstrap 4 est la suppression de soutien pour IE9, et est donc de se débarrasser de la flotte de lignes et de passer en Flexbox.
Pull request #21389
float
pour quelque chose, il n'a pas été prévu pour: css-tricks.com/all-about-floats. D'ailleurs, pourquoi ajouter un petit désagrément d'avoir à chaque flotteur? J'ai mis à jour d'autres développeurs' float mises en page, et quand le CSS change ou le CMS n'a pas mis une claire fixer quelque part, il fait des ravages.white-space
à la propriété-pourriez-vous expliquer cela?font-size
à0
sur l'espace blanc ? Qui devrait fonctionner de la croix-navigateur. Aussi,white-space: pre-line
effondrement de l'espace blanc.font-size:0
est, à mon humble avis, un mal de hack de la moderne clearfix - ensuite, vous devez réinitialiser la taille de la police de la valeur de l'achat sur leinline-block
élément, qui est difficile à maintenir.nowrap
parce quepre-line
honneurs des sauts de ligne, qui, je suppose que vous ne voulez pas. Le seul espace blanc qui est à gauche c'est à partir du navigateur de l'espacement des lettres parce que c'est essentiellement le traitement de votre divs que les lettres. Ainsi, vous pouvez simplement définir les marges gauche et droite pour-2px
: jsfiddle.net/PEcHf/1 pour compenser laletter-spacing
letter-spacing
ailleurs dans mon CSS.<div>
éléments, car elle pourrait entraîner des problèmes dans les anciennes versions d'IE si elle a utilisé les inline-block à la place de float. Donc, en gros, pour les plus anciennes de la compatibilité du navigateur.Alors que je suis d'accord qu'en général
inline-block
est mieux, il y a une chose à prendre en compte si vous êtes en utilisant un pourcentage des largeurs de pour créer une grille souple (ou si vous voulez pixel de largeur):Si vous utilisez
inline-block
pour les grilles que le total de 100% ou de près de 100% de largeur, vous devez vous assurer que votre balisage HTML contient pas d'espace entre les colonnes.Avec des flotteurs, ce n'est pas quelque chose que vous avez besoin de s'inquiéter, les colonnes de flotter au-dessus de n'importe quel espace ou un autre contenu entre les colonnes. À cette question, les réponses ont quelques bons conseils sur les moyens de lever HTML espaces sans faire de votre code laid.
Si pour une raison quelconque vous ne pouvez pas contrôler le balisage HTML (par exemple, une interprétation restrictive de la CMS), vous pouvez essayer les astuces décrites ici, ou vous pourriez avoir besoin à un compromis et d'utiliser des flotteurs au lieu de inline-block. Il y a aussi laid CSS trucs qui ne devrait être utilisé que dans des circonstances extrêmes, comme
font-size:0;
sur le conteneur de la colonne, puis remettre la taille de police à l'intérieur de chaque colonne.Par exemple:
float: left
. Il "fonctionne" (mais pour le wrapper qui ont besoin d'être effacé).inline-block
. Les espaces entre les blocs crée un espace à largeur fixe qui pousse la largeur totale au-delà de 100%, de casser la mise en page et causant la dernière colonne de descendre d'une ligne.inline-block
et pas d'espace entre les colonnes dans le code HTML. Il "fonctionne" encore une fois - mais le HTML est plus laid et de votre CMS pourrait forcer certains type de prettification ou la mise en retrait de sa sortie HTML faire ce difficile à réaliser dans la réalité.div+(whitespace) {display:none}
ou quelque chose?<div class="inlinething">hi</div> <div class="inlinething">there</div> more content here...
?)Si vous souhaitez aligner le
div
avec pixel précis, puis d'utiliser float.inline-block
semble toujours vous oblige à couper un peu de pixels (au moins dans IE)* {padding:0px; margin:0px; }
que cela contribue à l'équilibre de mon codageVous pouvez trouver la réponse dans la profondeur ici.
Mais en général avec
float
vous devez être conscient et de prendre soin des éléments environnants etinline-block
simple moyen d'éléments de ligne.Grâce
Il est l'une des caractéristiques sur inline-block qui ne peuvent pas être simple si. C'est que la valeur par défaut pour le vertical-align en CSS de base. Cela peut entraîner certains inattendu comportement d'alignement. 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 à l'aide de marge facilement.