Avantages de l’utilisation de display: inline-block vs float: laissé dans CSS

Normalement, quand on veut avoir plusieurs DIVs à la suite, on utilise float: left , mais maintenant j’ai découvert le truc de l’ display:inline-block

Exemple de lien ici . Il me semble que l’ display:inline-block est un meilleur moyen d’ align DIVs dans une rangée, mais y a-t-il des inconvénients? Pourquoi cette approche est-elle moins populaire que le float sortingck?

En 3 mots: inline-block is better.

Bloc Inline

Le seul inconvénient de l’approche display: inline-block est que dans IE7 et ci-dessous, un élément ne peut être affiché que si il était déjà inline par défaut. Cela signifie qu’au lieu d’utiliser un élément

, vous devez utiliser un élément . Ce n’est pas vraiment un gros inconvénient, car sémantiquement, un

est utilisé pour diviser la page alors qu’un est juste pour couvrir une page, donc il n’y a pas de grande différence sémantique. Un énorme avantage de l’ display:inline-block est que lorsque d’autres développeurs maintiennent votre code ultérieurement, il est beaucoup plus évident de savoir quel display:inline-block et text-align:right essaye d’accomplir un float:left ou float:right énoncé Mon avantage préféré de l’approche par inline-block intégrés est qu’il est facile d’utiliser vertical-align: middle , line-height et text-align: center centrer les éléments de manière intuitive. J’ai trouvé un excellent article sur la façon de mettre en œuvre le blocage en ligne entre navigateurs sur le blog Mozilla . Voici la compatibilité du navigateur .

Flotte

La raison pour laquelle l’utilisation de la méthode float n’est pas adaptée à la mise en page de votre page est que la propriété CSS float était initialement conçue uniquement pour que le texte entoure une image (style magazine) et ne soit pas . Lorsque vous modifiez des éléments flottants ultérieurement, vous rencontrerez parfois des problèmes de positionnement car ils ne figurent pas dans le stream de pages . Un autre inconvénient est que cela nécessite généralement un correctif, sinon cela peut casser des aspects de la page. Le correctif nécessite d’append un élément après les éléments flottants pour empêcher leur parent de s’effondrer autour d’eux, ce qui traverse la ligne sémantique entre séparer le style du contenu et constitue 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 résolu avec la propriété CSS white-space .

Modifier:

SitePoint est une source très crédible de conseils en conception de sites Web et ils semblent avoir le même avis que moi:

Si vous êtes novice en matière de mises en page CSS, vous devriez penser que l’utilisation de flotteurs CSS de manière imaginative est le summum des compétences. Si vous avez consommé autant de didacticiels de mise en forme CSS que vous pouvez trouver, vous pouvez supposer que la maîsortingse des flottants est un rite de passage. Vous serez ébloui par l’ingéniosité, stupéfait par la complexité, et vous obtiendrez un sentiment de réussite lorsque vous comprendrez enfin comment fonctionnent les flotteurs.

Ne soyez pas dupe. Tu es en train de subir un lavage de cerveau.

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

Mise à jour 2015 – Flexbox est une bonne alternative pour les navigateurs modernes :

 .container { display: flex; /* or inline-flex */ } .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 

Plus d’informations

21 décembre 2016 Mise à jour

Bootstrap 4 supprime la prise en charge d’IE9 et se débarrasse donc des flottants des lignes et de la gestion complète de la Flexbox.

Demande de tirage # 21389

Bien que je sois d’accord sur le fait qu’en général, inline-block sont meilleurs, il y a une chose à prendre en compte si vous utilisez des largeurs de pourcentage pour créer une grid réactive (ou si vous voulez des largeurs parfaites):

Si vous utilisez un inline-block en inline-block pour des grids totalisant 100% ou 100% de largeur, vous devez vous assurer que votre balisage HTML ne contient aucun espace blanc entre les colonnes .

Avec les flottants, ce n’est pas quelque chose dont vous devez vous préoccuper – les colonnes flottent sur tout espace ou autre contenu entre les colonnes. Les réponses à cette question contiennent de bons conseils sur la façon de supprimer les espaces blancs en HTML sans rendre votre code laid .

Si pour une raison quelconque vous ne pouvez pas contrôler le balisage HTML (par exemple, un CMS ressortingctif), vous pouvez essayer les astuces décrites ici, ou vous pourriez avoir à faire des compromis et utiliser des flottants au lieu de block-inline. Il existe également des trucs CSS peu pratiques qui ne devraient être utilisés que dans des circonstances extrêmes, comme font-size:0; sur le conteneur de colonne, réappliquez ensuite la taille de police dans chaque colonne .

Par exemple:

  • Voici une grid de 3 colonnes de 33,3% de largeur avec float: left . Cela “fonctionne” (mais pour que le wrapper ait besoin d’être effacé).
  • Voici exactement la même grid, avec inline-block . L’espace blanc entre les blocs crée un espace de largeur fixe qui repousse la largeur totale au-delà de 100%, brisant la mise en page et entraînant la dernière colonne dans une ligne.
  • Voici la même grid, avec un inline-block et aucun espace entre les colonnes du code HTML . Il “fonctionne” à nouveau – mais le HTML est plus laid et votre CMS peut forcer une sorte de prettification ou d’indentation à sa sortie HTML, ce qui rend cela difficile à réaliser dans la réalité.

Si vous souhaitez aligner le div avec pixel, utilisez float. inline-block semble toujours vous obliger à couper quelques pixels (au moins dans IE)

Vous pouvez trouver une réponse détaillée ici .

Mais en général, avec float vous devez être conscient et prendre soin des éléments environnants et de la manière simple de inline-block les éléments de ligne.

Merci

Il y a une caractéristique à propos du bloc en ligne qui peut ne pas être simple cependant. En d’autres termes, la valeur par défaut de l’alignement vertical dans CSS est la ligne de base. Cela peut provoquer 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 facilement en utilisant la marge.