Imiter un magasin à 2 colonnes Page

Il ne s'agit pas d'une simple mise en page à 2 colonnes. Il s'agit plutôt de créer une boîte CSS encadrée qui se comporterait comme s'il s'agissait d'une page de magazine à 2 colonnes, le contenu commençant par remplir la première colonne, puis ne se déplaçant que sur la deuxième colonne quand il manquerait d'espace dans le premier colonne (soit parce que plus de texte a été ajouté, soit parce que la taille de police a augmenté).Imiter un magasin à 2 colonnes Page

Quelques photos illustrant le fonctionnement de la disposition à 2 colonnes dans MS Word peuvent aider à clarifier le problème. Gardez à l'esprit le point clé est que nous ne savons pas à l'avance dont le contenu appartient à la première colonne et qui, dans la seconde (qui est un problème facile):

contenu commence dans la colonne 1:

enter image description here

déversements contenu dans la colonne 2 lorsque la taille de la police est augmentée:

enter image description here

est-il possible de le faire en css?

Source

2011-08-16 Jonah

non, cela aurait besoin javascript sûr. – jackJoe

@jackJoe: Il a malheureusement besoin de JavaScript s'il doit fonctionner dans les versions actuelles de IE :( – thirtydot

CSS3 a la réponse: http://www.w3.org/TR/css3-multicol/

Voir:http://jsfiddle.net/thirtydot/bjfVe/

#container { 
    -moz-column-count: 2; 
    -moz-column-gap: 1em; 
    -moz-column-rule: 1px solid #666; 

    -webkit-column-count: 2; 
    -webkit-column-gap: 1em; 
    -webkit-column-rule: 1px solid #666; 

    column-count: 2; 
    column-gap: 1em; 
    column-rule: 1px solid #666; 
}

Le support du navigateur est .. très prévisible: http://caniuse.com/multicolumn

Source

2011-08-16 18:47:37 thirtydot

gentil, je ne le savais pas :) bien qu'il ne soit pas interactif (en fonction des changements de taille de police), mais il prouve Cela peut être fait via CSS. – jackJoe

Imiter un magasin à 2 colonnes Page

Répondre

Questions connexes