float : left ; vs display : inline ; vs display : inline-block ; vs display : table-cell ;

Question

Ma Question(s)

1. Sont une de ces méthodes privilégiées par un web designer professionnel?

2. Sont une de ces méthodes prefereed par un navigateur web lors de l'élaboration du site web?

3. C'est tout simplement la préférence personnelle?

4. Il existe d'autres techniques que je suis absent?

Remarque: les questions ci-Dessus en ce qui concerne la conception d'un multi-colonnes de mise en page

---

float:left;

http://jsfiddle.net/CDe6a/

C'est la méthode que j'ai toujours utiliser lors de la création de mises en page en colonnes, et il semble fonctionner très bien. Le parent ne l'effondrement sur lui-même, donc vous avez juste besoin de se rappeler d' clear:both; par la suite. Un autre con que je viens de trouver l'incapacité à aligner le texte verticalement.

display:inline;

Cela semble corriger le problème de l'effondrement des parents, mais ajoute un espace.

http://jsfiddle.net/CDe6a/1/

En supprimant les espaces de html semble être la méthode la plus simple de résoudre ce problème, mais n'est pas souhaitée, si vous êtes vraiment pointilleux à propos de votre code html.

http://jsfiddle.net/CDe6a/2/

display:inline-block;

Semble se comportent exactement comme display:inline;.

http://jsfiddle.net/CDe6a/3/

display:table-cell;

http://jsfiddle.net/CDe6a/4/

Fonctionne parfaitement.

Mes pensées:

Je suis sûr que je suis absent une tonne de trucs, comme certaines exceptions qui va casser la mise en page, mais, display:table-cell; semble fonctionner le mieux, et je pense que je vais commencer à remplacer float:left; comme j'ai toujours l'impression de désordre sur clear:both;. J'ai lu beaucoup d'articles et de blogs à ce sujet sur le web, mais aucun d'eux de me donner une réponse précise sur ce que je doit utiliser lors de la pose de mon site web.

Answer 1

Des options vous m'avez demandé:

• float:left;
  Je n'aime pas la flotte en raison de la nécessité d'avoir une annotation supplémentaire pour effacer le flotteur. Pour autant que je suis concerné, l'ensemble de l' float concept a été mal conçu dans le CSS specs. Nous ne pouvons rien faire à ce sujet maintenant. Mais l'important, c'est qu'il fonctionne, et il fonctionne sur tous les navigateurs (même IE6/7), afin de l'utiliser si vous le souhaitez.

Le additionnelle pour la compensation peut ne pas être nécessaire si vous utilisez l' :after sélecteur pour effacer les chars, mais ce n'est pas une option si vous voulez soutenir IE6 ou IE7.

• display:inline;
  Cela ne devrait pas être utilisé pour la mise en page, à l'exception de IE6/7, où l' display:inline; zoom:1 est un hack pour le cassé de soutien pour inline-block.

• display:inline-block;
  C'est mon option préférée. Il fonctionne bien et de manière cohérente sur tous les navigateurs, avec un bémol pour IE6/7, qui la soutiennent pour certains éléments. Mais voir ci-dessus pour le hacky solution pour contourner ce problème.

L'autre gros inconvénient avec inline-block qu'en raison de la ligne de l'aspect, de les espaces blancs entre les éléments sont traités de la même façon que les espaces blancs entre les mots du texte, de sorte que vous pouvez obtenir les lacunes apparaissant entre les éléments. Il y a des solutions de rechange, mais aucun d'entre eux sont idéales. (le mieux est tout simplement de ne pas avoir des espaces entre les éléments)

• display:table-cell;
  Une autre où vous aurez des problèmes avec la compatibilité du navigateur. Plus ie ne fonctionne pas avec cette à toutes. Mais même pour les autres navigateurs, il est intéressant de noter que table-cell est conçu pour être utilisé dans un contexte d'être à l'intérieur d'éléments de style comme table et table-row; à l'aide de table-cell dans l'isolement n'est pas l'intention de le faire, de sorte que vous pouvez rencontrer différents navigateurs de les traiter différemment.

D'autres techniques que vous avez manqués? Oui.

• Puisque vous dites que c'est pour un multi-colonnes de mise en page, il y a un CSS fonctionnalité des Colonnes que vous souhaitez connaître. Cependant, il n'est pas très bien pris en charge (non pris en charge par IE même dans IE9, et un vendeur préfixe requis par tous les autres navigateurs), de sorte que vous pouvez ne pas vouloir l'utiliser. Mais il est une autre option, et vous l'avez demander.

• Il y a également CSS FlexBox fonction, qui est destiné à vous permettre d'avoir le déroulement du texte de la case à cocher. Il est une fonctionnalité qui permet à certaines des mises en page complexes, mais c'est encore en développement -- voir http://html5please.com/#flexbox

Espérons que cela aide.

Answer 2

J'utilise habituellement float: left; et ajouter overflow: auto; à résoudre l'effondrement problème parent (pourquoi cela fonctionne, overflow: auto permettra d'élargir le parent au lieu d'ajouter des barres de défilement si vous ne lui donnez pas explicite hauteur, overflow: hidden également). La plupart de l'alignement vertical des besoins, j'ai eu sont pour une ligne de texte dans les barres de menu, qui peut être résolu à l'aide de line-height de la propriété. Si j'ai vraiment besoin d'verticale aligner un élément de bloc, j'étais explicite de la hauteur de la mère et de l'alignés verticalement point, la position absolue, supérieure à 50%, et la marge négative.

La raison pour laquelle je ne pas utiliser display: table-cell est la façon dont il déborde lorsque vous avez plus d'éléments que le site de la largeur de la poignée. table-cell va forcer l'utilisateur à faire défiler horizontalement, tandis que la flotte va envelopper le menu de dépassement, rendant encore utilisable sans la nécessité pour le défilement horizontal.

La meilleure chose à propos float: left et overflow: auto, c'est qu'il fonctionne tout le chemin du retour à IE6 sans hacks, probablement même plus loin.

Answer 3

Je dirais que cela dépend de ce que vous en avez besoin pour:

1. Si vous en avez besoin juste d'avoir 3 colonnes de mise en page, je te suggère de le faire avec float.

2. Si vous en avez besoin pour le menu, vous pouvez utiliser inline-block. Pour les espaces de problème, vous pouvez utiliser quelques astuces comme décrit par Chris Coyier ici http://css-tricks.com/fighting-the-space-between-inline-block-elements/.

3. Si vous avez besoin de faire un choix multiple option, dont la largeur doit répartir uniformément à l'intérieur d'une zone spécifiée, alors je préfère display: table. Cela ne fonctionnera pas correctement dans certains navigateurs, donc, cela dépend de votre navigateur prend en charge.

Enfin, quelle peut être la meilleure méthode est d'utiliser flexbox. La spécification de ce qui a changé à quelques reprises, de sorte qu'il n'est pas stable pour l'instant. Mais une fois qu'il a été finalisé, ce sera la meilleure méthode je pense.

Answer 4

Je préfère inline-block, bien que le flotteur est également utile. Table-cell n'est pas traduit correctement par les vieux S (ni ne inline-block, mais il y a l' zoom: 1; *display: inline hack que j'utilise souvent). Si vous avez des enfants qui ont une hauteur plus petite que celle de leurs parents, de flotteurs les amènera vers le haut, tandis que inline-block vis parfois.

La plupart du temps, le navigateur va interpréter le tout correctement, à moins, bien sûr, c'est IE. Vous devez toujours vérifier pour s'assurer que IE ne suce pas, par exemple, la table-cell concept.

Dans toute la réalité, oui, il se résume à la préférence personnelle.

Une technique que vous pouvez utiliser pour se débarrasser de l'espace blanc consisterait à définir une font-size de 0 à la mère, puis donner de l' font-size pour les enfants, même si c'est une dispute, et le brut.

Answer 5

Pour mémoire seulement, pour ajouter à la réponse de Spudley, il y a aussi la possibilité d'utiliser position: absolute et les marges si vous connaissez les largeurs des colonnes.

Pour moi, le problème principal lors de la mise au point d'une méthode est de savoir si vous avez besoin des colonnes pour remplir toute la hauteur (hauteurs égales), où table-cell est la méthode la plus simple (si vous ne vous souciez pas des anciens navigateurs).