Utilisez CSS display: table pour mise en page


Original: http://www.onenaught.com/posts/201/use-css-displaytable-for-layout


Publié le 15 Février 2009

Sur cette page:

 

  1.      Pas besoin de css float pour la mise en page dans les navigateurs modernes
  2.      N’est-ce pas l’aide du tableau pour la présentation de mal?
  3.      Qu’en est-il IE 7 et 6?
  4.      Certaines limitations ou questions
  5.      plus d’infos
  6.      traductions


J’ai eu ce poste dans le projet depuis Octobre 2008, j’ai pensé que je la conception de ce site de blog en utilisant l’affichage:. Table et expliquer que, dans une série de messages, à commencer par celui-ci. Mais je n’ai jamais trouvé le temps pour la refonte!

Pourtant, j’ai été en utilisant display: table sur un site beaucoup plus pendant environ 6 mois maintenant, alors j’ai pensé que je pourrais aussi bien poster ce qu’il est, et peut-être suivi avec d’autres exemples plus tard.

En outre, environ 3 semaines après que j’ai commencé ce projet, Rachel Andrew et Kevin Yank a écrit un livre sur CSS display: table pour la mise en page, ainsi que d’un article de synthèse utile! Je ne recommande regardant cet article pour des détails plus fins.

Pas besoin de css float pour la mise en page dans les navigateurs modernes

Depuis quelques années maintenant, les développeurs web qui font des mises en page CSS ont utilisé des flotteurs ou le positionnement absolu pour les sites web de mise en page pour éviter l’utilisation nonsémantiques <table> HTML s.

Bien que faisable, cerceaux supplémentaires doivent souvent être sauté par (surtout pour IE) et certaines choses apparemment simples peuvent être plus difficiles que nécessaire (comme des colonnes de hauteur égale).

Cependant, pour une solution, affichage simple à base de CSS: table, display: table-row, display: table-cell, etc sont tous utilisables aujourd’hui dans Firefox 2 +, Safari 3 +, Opera 9 + et IE8.

exemple:

Considérons le code HTML suivant:


Et le style CSS pour elle d’obtenir des colonnes de hauteur égale:

Et c’est tout!

Ce qui précède est juste le peu de disposition de la CSS. Voici quelques captures d’écran (cliquez pour agrandir) avec le contenu et le style très basique, juste pour voir l’effet de la colonne de hauteur égale:

Le premier est avec Firefox 3 et la seconde avec IE8.

Vous pouvez effectivement omettre divs supplémentaires, même celui qui obtient affichage: table et le navigateur est nécessaire pour créer un tableau anonyme pour vous.


N’est-ce pas l’aide du tableau pour la présentation de mal?

Ce n’est pas le même que l’utilisation des éléments de tableau HTML structurelles à des fins de mise en page qui est en fait une utilisation inappropriée des tables.

Cela est d’utiliser les CSS pour donner table comme l’affichage, ce qui est bien car elle laisse le HTML (et la structure du document) dans le tact.

Qu’en est-il IE 7 et 6?

IE7 et 6 demeurent évidemment des problèmes, mais vous pouvez utiliser les commentaires conditionnels et leur donner des techniques plus anciennes qui tentent d’atteindre cet objectif.

Certaines limitations ou questions

Certaines limitations de l’affichage de css: table j’ai rencontré, cependant, sont les suivants:

 

  •      Manque d’équivalents colspan / rowspan
  •      Comme des tableaux HTML, une cellule de CSS peut se développer en largeur en fonction du contenu (ainsi que la hauteur).


Sur le dernier que j’ai remarqué quand utilisant des choses comme <pre> même avec overflow: auto avec la pensée que, tout comme l’intérieur flottait colonnes avec des largeurs affectées cela se traduirait dans les blocs <pre> se défile horizontales si elles devenaient trop large.

Au lieu de cela, comme avec des tableaux HTML, ils poussent la cellule, ils sont po La seule solution que je savais que c’était pour donner un px ou la largeur de lui à de tels éléments. (Elle s’applique également aux grandes images dans une cellule.)

Cela étant dit, display: table semble beaucoup plus propre!

CSS3 a un module avancé de mise en page dans les œuvres, mais il n’y a pas de mise en oeuvre du navigateur de celui-ci (que je suis conscient de), si dans l’intervalle ce qui pourrait être une approche utile.

plus d’infos

 

traductions

Mise à jour:. Mai 2010 Traduit en biélorusse, en Ucallweconn

Comments are closed.