2010-01-12 8 views
2

J'ai des éléments dynamiques que je voudrais descendre vers le bas et remplir plusieurs colonnes (comme dans Word, par exemple) plutôt que de flotter à gauche ou à droite ou empiler de la manière typique. Y a-t-il des fonctions de CSS qui rendent cela possible? Si non, quelle ligne de conduite puis-je prendre ici?Colonnes dynamiques en CSS

+0

Parlez-vous de quelque chose comme une mise en page de journal? Je sais qu'il y a des plugins jquery qui vont le faire pour vous. – codedude

Répondre

5

Il est possible, mais seulement dans CSS3, qui n'a pas encore la part de marché requise pour être utilisé en toute sécurité.

Cochez cet article sur Zen Elements pour plus de détails.

Une solution jusqu'à ce que CSS3 est « mainstream » pourrait être une solution Javascript/JQuery comme celui-ci: Columnizer jQuery Plugin

+0

Excellent. J'avais toujours peur de plonger dans jQuery mais j'étais stupide de penser que ce serait compliqué! Très facile et super exemples. Merci. – Daniel

2

Qu'en est-il un <li> qui est flotté à gauche et afficher: inline-block?

+0

Je pense que vous pouvez être sur quelque chose ici. Est-il possible de diviser les articles en plusieurs colonnes automatiquement? – Daniel

+0

oui, si vous définissez une largeur des éléments et une hauteur du conteneur div. ils devraient remplir correctement – mkoryak

+0

@mkoryak Il est en effet possible d'émuler des colonnes de cette façon mais l'ordre est incorrect. Les colonnes devraient s'accumuler de haut en bas et de côté, et non l'inverse. – jpeltoniemi

1

CSS3 permet(), mais il est pas largement encore pris en charge: seules les versions récentes de Firefox et Safari (ainsi que d'autres navigateurs basés sur Webkit, probablement) le supporte.

JavaScript est votre meilleur pari si vous avez absolument besoin que ce soit flexible et général. Si vous le faites uniquement pour un texte spécifique, vous pouvez également le coder en dur.