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

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/

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/

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/

affichage: bloc en ligne;

Semble se comporter exactement comme display:inline;.

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

affichage: table-cellule;

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

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.

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.

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.

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.

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.

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).

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 .