Inconvénient de CSS : display : inline-block vs float : left

Question

Normalement, quand on veut avoir plusieurs d’affilée nous utiliserions , mais maintenant j’ai découvert le truc de``

Lien de l’exemple ici. Il me semble que est une meilleure façon de ```` d’affilée, mais y a-t-il des inconvénients ? Pourquoi cette approche est moins populaire, puis le truc ?

Answer 1

En 3 mots: inline-block , c'est mieux.

Inline Block

Le seul inconvénient à l' display: inline-block approche est que, dans IE7 et en dessous d'un élément ne peut être affichée inline-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 pour la division de la page en une <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 de l' display:inline-block , c'est que quand d'autres développeurs sont le maintien de votre code à un moment plus tard, il est d'autant plus évident qu' display:inline-block et text-align:right tente de réaliser qu'un float:left ou float:right déclaration. Mon préféré profiter de l' inline-block approche est qu'il est facile à utiliser, vertical-align: middle, line-height et text-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.

Flotteur

La raison que l'utilisation de l' float méthode n'est pas adaptée pour la mise en page de votre page est parce que l' float 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 empêcher leurs parents 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 l' white-space d'une 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:

Si vous êtes nouveau à la mise en page CSS, vous seriez pardonné de penser que à l'aide de CSS flotte dans l'imagination des moyens est à la hauteur de compétence. Si vous ont consommé autant de CSS de mise en page des tutoriels que vous pouvez trouver, vous pourriez supposons que la maîtrise de chars est un rite de passage. Vous serez ébloui grâce à l'ingéniosité, étonné par la complexité, et vous gagnerez un sens de réalisation lorsque vous enfin comprendre comment les flotteurs de travail.

Ne vous laissez pas berner. Vous êtes un lavage de cerveau.

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

Answer 2

Si vous souhaitez aligner le avec pixel précis, puis utilisez flotteur. semble toujours vous oblige à couper quelques pixels (au moins dans IE)

Answer 3

Vous pouvez trouver la réponse en détail ici.

Mais en général avec vous devez être conscient et de prendre soin des éléments environnants et moyen simple d’éléments de la ligne.

Merci