flotteur: gauche; vs affichage: en ligne; vs affichage: bloc en ligne; vs affichage: table-cellule;

281

Mes questions)

  1. L'une de ces méthodes est-elle préférée par un concepteur Web professionnel?

  2. L'une de ces méthodes est-elle préférée par un navigateur Web lors du dessin du site Web?

  3. Est-ce tout simplement une préférence personnelle?

  4. Y a-t-il d'autres techniques qui me manquent?

Remarque: Les questions ci-dessus concernent la conception d'une disposition à plusieurs colonnes


flotteur: gauche;

http://jsfiddle.net/CDe6a/

float: image de gauche

C'est la méthode que j'utilise toujours lors de la création de mises en page de colonnes, et cela semble très bien fonctionner. Cependant, le parent s'effondre sur lui-même, il vous suffit donc de vous en souvenir par la clear:both;suite. Un autre con que je viens de découvrir était l'incapacité d'aligner le texte verticalement.

affichage: en ligne;

Cela semble corriger le problème du parent qui s'effondre, mais ajoute des espaces.

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

affichage: image en ligne

La suppression des espaces blancs du HTML semble être la solution la plus simple pour résoudre ce problème, mais n'est pas souhaitée si vous êtes vraiment pointilleux sur votre HTML.

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

aucune image d'espace blanc html

affichage: bloc en ligne;

Semble se comporter exactement comme display:inline;.

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

affichage: image en bloc

affichage: table-cellule;

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

affichage: image de cellule de tableau

Fonctionne parfaitement.

Mes pensées:

Je suis sûr qu'il me manque une tonne de choses, comme certaines exceptions qui briseront la mise en page, mais display:table-cell;semble fonctionner le mieux, et je pense que je vais commencer à remplacer float:left;car je semble toujours gâcher clear:both;. J'ai lu de nombreux articles et blogs à ce sujet sur le Web, mais aucun d'eux ne me donne une réponse définitive sur ce que je devrais utiliser lors de la mise en place de mon site Web.

EGHDK
la source
4
Voyez ce que les gars de html5boilerplate et Twitter Bootstrap utilisent et respectent
Robert Niestroj
1
Il y a un excellent article sur la lutte contre l'espace sur css-tricks: css-tricks.com/fighting-the-space-between-inline-block-elements
Lea Rosema
J'ai essayé d'utiliser la display: inlinepropriété et j'ai constaté qu'elle ne s'occupe pas correctement du remplissage des éléments enfants. Mais si j'utilise le, display: inline-blockcela est pris en charge automatiquement. S'il vous plaît voir le lien - codepen.io/prashdeep/pen/rVOyvd S'il vous plaît laissez-moi savoir vos entrées sur le même
zilcuanu

Réponses:

200

Parmi les options que vous avez demandées:

  • float:left;
    Je n'aime pas les flotteurs en raison de la nécessité d'avoir un balisage supplémentaire pour effacer le flotteur. En ce qui me concerne, l'ensemble du floatconcept a été mal conçu dans les spécifications CSS. Mais nous ne pouvons rien y faire maintenant. Mais l'important est que cela fonctionne, et cela fonctionne dans tous les navigateurs (même IE6 / 7), alors utilisez-le si vous l'aimez.

Le balisage supplémentaire pour l'effacement peut ne pas être nécessaire si vous utilisez le :aftersélecteur pour effacer les flottants, mais ce n'est pas une option si vous souhaitez prendre en charge IE6 ou IE7.

  • display:inline;
    Cela ne devrait pas être utilisé pour la mise en page, à l'exception d'IE6 / 7, où se display:inline; zoom:1trouve un hack de secours pour le support cassé de inline-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 hacky pour contourner cela.

L'autre grande mise en garde inline-blockest qu'en raison 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 de texte, de sorte que vous pouvez obtenir des espaces apparaissant entre les éléments. Il existe des solutions à ce problème, mais aucun n'est idéal. (le mieux est simplement de ne pas avoir d'espace entre les éléments)

  • display:table-cell;
    Un autre où vous aurez des problèmes avec la compatibilité du navigateur. Les IE plus anciens ne fonctionneront pas du tout avec cela. Mais même pour les autres navigateurs, il convient de noter qu'il table-cellest conçu pour être utilisé dans un contexte d'être à l'intérieur d'éléments qui sont stylisés comme tableet table-row; utiliser table-cellde manière isolée n'est pas la manière prévue de le faire, vous pouvez donc rencontrer différents navigateurs le traitant différemment.

D'autres techniques que vous avez peut-être manquées? Oui.

  • Puisque vous dites que c'est pour une mise en page à plusieurs colonnes, il existe une fonctionnalité de colonnes CSS que vous voudrez peut-être connaître. Cependant, ce n'est pas la fonctionnalité la mieux prise en charge (non prise en charge par IE même dans IE9, et un préfixe de fournisseur requis par tous les autres navigateurs), vous ne voudrez donc peut-être pas l'utiliser. Mais c'est une autre option, et vous avez demandé.

  • Il y a aussi la fonctionnalité CSS FlexBox, qui est destinée à vous permettre d'avoir du texte qui coule de case en case. C'est une fonctionnalité passionnante qui permettra certaines mises en page complexes, mais cela est encore très en développement - voir http://html5please.com/#flexbox

J'espère que cela pourra aider.

Spudley
la source
2
vous n'avez pas besoin de balisage supplémentaire pour effacer les flottants, voir ma réponse à ce sujet.
Lie Ryan
3
Réponse la plus robuste = réponse.
EGHDK
2
J'utilise toujours inline-blockparce que c'est fait exactement pour ces cas.
Rápli András
1
Une bonne méthode pour supprimer les espaces qui s'affichent: le bloc en ligne crée, vous pouvez définir la taille de la police sur 0 sur l'élément conteneur, puis définir la valeur souhaitée pour les éléments en ligne eux-mêmes. Cela évite d'avoir à supprimer les espaces dans le html
AlexMorley-Finch
1
@ AlexMorley-Finch: En effet, c'est une bonne solution. Sachez toutefois que cela ne fonctionne pas si vous utilisez des tailles de police dans ems. Cela signifie que ce n'est peut-être pas une solution appropriée pour tous les cas. Vous aimerez peut-être aussi voir cette réponse que j'ai publiée séparément, qui couvre ce point, et d'autres options pour traiter le problème des espaces blancs.
Spudley
34

J'utilise float: left;et j'ajoute généralement overflow: auto;pour résoudre le problème du parent qui s'effondre (quant à la raison pour laquelle cela fonctionne, overflow: autodéveloppera le parent au lieu d'ajouter des barres de défilement si vous ne lui donnez pas de hauteur explicite, overflow: hiddenfonctionne également). La plupart des besoins d'alignement vertical que j'avais avaient pour une ligne de texte dans les barres de menus , qui peuvent être résolus en utilisant la line-heightpropriété. Si j'ai vraiment besoin d'aligner verticalement un élément de bloc, je définirais une hauteur explicite pour 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-cellest 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 forcera l'utilisateur à faire défiler horizontalement, tandis que les flottants encapsuleront le menu de débordement, le rendant toujours utilisable sans avoir besoin de défilement horizontal.

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

entrez la description de l'image ici

Lie Ryan
la source
Cet excellent point, non mentionné dans de nombreux tutoriels populaires. Quelques questions: est-ce réellement testé dans différents navigateurs? Quelle est votre méthode de choix pour dessiner un séparateur entre deux blocs tels que la navigation et le contenu? La raison pour laquelle je pose la question est que si les divisions ci-dessus sont de hauteur différente, ce serait difficile.
Shital Shah
@ShitalShah: Je ne sais pas trop ce que vous entendez par "ceci", mais j'ai implémenté d'innombrables menus horizontaux et le flotteur gauche et le débordement est IMO le moyen le plus propre et le plus fiable pour implémenter un menu horizontal sur de nombreux navigateurs différents, anciens et Nouveau. Pour ajouter des séparateurs, j'utilise généralement la bordure gauche (ou des images d'arrière-plan pour les séparateurs plus sophistiqués, si vous n'avez pas besoin de vous soucier de l'ancien navigateur, vous pouvez également utiliser CSS3 border-image). Je ne comprends pas très bien ce que vous entendez par différentes hauteurs, voulez-vous expliquer plus ou ajouter un violon?
Lie Ryan
Cela clarifiait beaucoup la compensation et je ne savais pas qu'un débordement pouvait le faire. Je suis habitué à la méthode: after où vous ajoutez un contenu: "." et visibilité: cachée. Merci pour cela
Nils_e
9

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

  1. Si vous en avez besoin juste pour obtenir une disposition en 3 colonnes, je vous suggère de le faire avec float.

  2. Si vous en avez besoin pour le menu, vous pouvez utiliser inline-block. Pour le problème des espaces blancs, 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 une option à choix multiples, dont la largeur doit se répartir uniformément à l'intérieur d'une boîte spécifiée, je préfère display: table. Cela ne fonctionnera pas correctement dans certains navigateurs, cela dépend donc de la prise en charge de votre navigateur.

Enfin, quelle pourrait être la meilleure méthode à utiliser flexbox. Les spécifications pour cela ont changé plusieurs fois, donc ce n'est pas encore stable. Mais une fois finalisé, ce sera la meilleure méthode que je pense.

Zendy
la source
+1 pour le lien vers l'article de Chris Coyier. Un ajout à sa liste est la méthode utilisée par les grilles Pure CSS de YUI : github.com/yui/pure/blob/master/src/grids/css/grids-core.css
Web_Designer
4

Je préfère le bloc en ligne, bien que float soit également utile. La cellule de tableau n'est pas rendue correctement par les anciens IE (ni le blocage en ligne, mais il y a le zoom: 1; *display: inlinehack que j'utilise fréquemment). Si vous avez des enfants qui ont une taille plus petite que leurs parents, les flotteurs les amèneront vers le haut, tandis que les blocs en ligne se visseront parfois.

La plupart du temps, le navigateur interprétera tout correctement, à moins, bien sûr, que ce soit IE. Vous devez toujours vérifier pour vous assurer qu'IE ne craint pas - par exemple, le concept de cellule de table.

Dans toute réalité, oui, cela se résume à des préférences personnelles.

Une technique que vous pourriez utiliser pour vous débarrasser des espaces blancs serait de définir un font-size0 sur le parent, puis de donner le font-sizedos aux enfants, bien que ce soit compliqué et brut.

Tchad
la source
si "vous devez toujours vérifier qu'IE ne craint pas", vous serez toujours déçu. hehe. (D'un autre côté, il a tout à fait raison de dire que vous devriez toujours vérifier que votre code
n'aspire
4

Pour mémoire seulement, pour ajouter à la réponse de Spudley, il y a aussi la possibilité d'utiliser position: absoluteet 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 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 beaucoup des anciens navigateurs).

Wtower
la source
0

Je préfère inline-block, mais floatc'est toujours un moyen utile de rassembler des éléments HTML, en particulier lorsque nous avons des éléments que l'on devrait coller à gauche et un à droite, flottant mieux en écrivant moins de lignes, tandis que le bloc en ligne fonctionne bien dans de nombreux autres cas .

entrez la description de l'image ici

Alireza
la source