float: gauche; vs display: inline; vs display: inline-block; vs display: table-cellule;
Mes questions)
Certaines de ces méthodes sont-elles préférées par un concepteur de sites Web professionnel?
Certaines de ces méthodes sont-elles préfacées par un navigateur Web lors de la création du site Web?
Est-ce juste une préférence personnelle?
Y a-t-il d'autres techniques qui me manquent?
Remarque: Les questions ci-dessus concernent la conception d'une présentation multi-colonnes
float: gauche;
C’est la méthode que j’utilise toujours lors de la création de dispositions de colonnes, et elle semble bien fonctionner. Cependant, le parent s'effondre sur lui-même, vous devez donc simplement vous souvenir de clear:both; par la suite. Un autre problème que je viens de constater est l'impossibilité d'aligner le texte verticalement.
affichage: en ligne;
Cela semble corriger le problème du parent qui s'effondre, mais ajoute des espaces.
Suppression des espaces du code HTML semble être la solution la plus simple, mais elle n’est pas souhaitable si vous êtes vraiment difficile en ce qui concerne votre code HTML.
affichage: inline-block;
Semble se comporter exactement comme display:inline;.
affichage: table-cellule;
Fonctionne parfaitement.
Mes pensées:
Je suis sûr qu'il me manque une tonne de choses, comme certaines exceptions qui vont briser la mise en page, mais display:table-cell; semble fonctionner au mieux, et je pense que je vais commencer à remplacer float:left; comme il me semble gâcher sur clear:both;. J'ai lu de nombreux articles et blogs à ce sujet sur le Web, mais aucun d'eux ne me donne de réponse précise sur ce que je devrais utiliser lors de la présentation de mon site Web.
Parmi les options que vous avez posées:
float:left;
Je n'aime pas les flotteurs en raison de la nécessité de disposer d'un supplément pour effacer le flotteur. En ce qui me concerne, le concept entierfloata été mal conçu dans les spécifications CSS. Rien que nous puissions faire à ce sujet maintenant. Mais l’important est que cela fonctionne, et que cela fonctionne dans tous les navigateurs (même IE6/7), donc utilisez-le si vous l’aimez.
Le balisage supplémentaire pour la suppression peut ne pas être nécessaire si vous utilisez le sélecteur :after pour supprimer les éléments flottants, mais cette option n'est pas disponible si vous souhaitez prendre en charge IE6 ou IE7.
display:inline;
Ceci ne devrait pas être utilisé pour la mise en page, à l'exception de IE6/7, oùdisplay:inline; zoom:1est un hack de secours pour le support cassé deinline-block.display:inline-block;
Ceci est mon option préférée. Il fonctionne bien et de manière cohérente sur tous les navigateurs, avec une mise en garde pour IE6/7, qui le prend en charge pour certains éléments. Mais voir ci-dessus pour la solution de hacky pour contourner ce problème.
L'autre inconvénient majeur avec inline-block est que, du fait de l'aspect en ligne, les espaces blancs entre les éléments sont traités de la même manière que les espaces blancs entre les mots du texte, de sorte que vous pouvez obtenir des espaces entre les éléments. Il existe des solutions pour y remédier, mais aucune d’entre elles n’est idéale. (Le mieux est simplement de ne pas laisser d'espaces entre les éléments)
display:table-cell;
Une autre où vous aurez des problèmes de compatibilité de navigateur. Les anciens IE ne fonctionneront pas du tout avec cela. Mais même pour les autres navigateurs, il convient de noter quetable-cellest conçu pour être utilisé dans le contexte des éléments internes stylés commetableettable-row; L'utilisation detable-cellde manière isolée n'est pas la méthode envisagée. Il est donc possible que différents navigateurs le traitent différemment.
D'autres techniques que vous avez peut-être manquées? Oui.
Puisque vous dites que cela s’applique à une mise en page multi-colonnes, il existe un fonctionnalité CSS Columns que vous voudrez peut-être connaître. Toutefois, ce n’est pas la fonctionnalité la plus largement prise en charge (non prise en charge par IE même dans IE9 et par un préfixe de fournisseur requis par tous les autres navigateurs), vous pouvez donc ne pas l’utiliser. Mais c'est une autre option, et vous avez demandé.
Il existe également une fonctionnalité CSS FlexBox, conçue pour vous permettre de faire passer du texte d'une zone à l'autre. C'est une fonctionnalité excitante qui permettra des mises en page complexes, mais celle-ci est encore en développement - voir http://html5please.com/#flexbox
J'espère que ça t'as aidé.
J'utilise habituellement float: left; et ajoute overflow: auto; à résoudre le problème de la réduction du parent (pour expliquer pourquoi cela fonctionne, overflow: auto développera le parent au lieu d'ajouter des barres de défilement si vous ne lui donnez pas de hauteur explicite, overflow: hidden fonctionne aussi). La plupart de mes besoins en alignement vertical sont pour ne ligne de texte dans les barres de men , qui peut être résolu en utilisant la propriété line-height. Si j'avais vraiment besoin d'aligner verticalement un élément de bloc, je définirais une hauteur explicite sur le parent et l'élément aligné verticalement, la position absolue, les 50% supérieurs et la marge négative.
La raison pour laquelle je n'utilise pas display: table-cell est la façon dont il déborde lorsque vous avez plus d'éléments que la largeur du site ne peut en gérer. table-cell obligera l'utilisateur à faire défiler horizontalement, tandis que floats encapsulera le menu de débordement, le rendant ainsi utilisable sans recourir au défilement horizontal.
La meilleure chose à propos de float: left et overflow: auto, c’est que cela fonctionne jusqu’à IE6 sans piratage, probablement même plus loin.
Je dirais que cela dépend de ce dont vous avez besoin:
Si vous en avez juste besoin pour avoir une disposition en 3 colonnes, je vous conseillerais de le faire avec
float.Si vous en avez besoin pour le menu, vous pouvez utiliser
inline-block. Pour le problème des espaces, vous pouvez utiliser quelques astuces décrites par Chris Coyier ici http://css-tricks.com/fighting-the-space-between-inline-block-elements/ .Si vous devez créer une option à choix multiples, dont la largeur doit être répartie uniformément dans une zone spécifiée, je préférerais alors
display: table. Cela ne fonctionnera pas correctement dans certains navigateurs, cela dépend donc de la prise en charge de votre navigateur.
Enfin, la meilleure méthode consiste à utiliser flexbox. La spécification pour cela a changé plusieurs fois, elle n'est donc pas stable pour l'instant. Mais une fois que ce sera finalisé, ce sera la meilleure méthode que je connaisse.
Je préfère inline-block, bien que float soit également utile. La table-cellule n'est pas rendue correctement par les anciens IE (inline-block non plus, mais il y a le hack zoom: 1; *display: inline que j'utilise fréquemment). Si vous avez des enfants dont la taille est inférieure à celle de leurs parents, les flotteurs les amèneront au sommet, alors que le bloc en ligne se trompera parfois.
La plupart du temps, le navigateur interprétera tout correctement, à moins, bien sûr, que ce soit IE. Vous devez toujours vérifier que IE ne craint pas - par exemple, le concept de cellule de tableau.
En réalité, oui, cela revient à une préférence personnelle.
Une technique que vous pouvez utiliser pour vous débarrasser des espaces serait de définir un font-size de 0 sur le parent, puis de rendre le font-size aux enfants, bien que cela soit fastidieux et brut.
Pour mémoire, pour ajouter à la réponse de Spudley, il existe également la possibilité d'utiliser position: absolute et des marges si vous connaissez la largeur des colonnes.
Pour moi, le principal problème lors du choix d'une méthode est de savoir si vous avez besoin de colonnes pour remplir toute la hauteur (hauteurs égales), où la méthode tableau-cellule est la méthode la plus simple (si vous ne vous souciez pas beaucoup des anciens navigateurs).
Je préfère inline-block, mais float sont toujours utiles pour assembler des éléments HTML, en particulier lorsque nous avons des éléments à coller à gauche et un à droite, qui fonctionnent mieux avec moins de lignes, inline-block fonctionne bien dans de nombreux autres cas.
