Article à deux colonnes avec CSS [fermé] - html, css

Je voudrais avoir un single en post en deux colonnes automatiquement (pas avec 2 divs) comme dans un article de journal. Y a-t-il un moyen d'y parvenir?

Réponses:

Vous pouvez utiliser CSS3 multi-colonnes, bien que le support n'est pas très bon

div {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-width: 20em;
-moz-column-width: 20em;
column-width: 20em;
/* IE10 & Opera 11.1 + support this property unprefixed */
}

Exemple: http://jsfiddle.net/eFznL/2/

Vous pouvez, en utilisant CSS3. Un nouveau module appelé "Multi-Column Layout" (Disposition sur plusieurs colonnes) répond précisément à cet objectif. Voici le lien à la recommandation du W3C.

Vous pouvez l'utiliser maintenant dans Firefox, Safari, Chrome, Opera et Inernet Explorer 10. Jetez un coup d'œil à cette page web vérifier la compatibilité des recommandations CSS3 avec plusieurs versions de navigateur.

Le texte doit circuler d’une colonne à l’autre et vous n’avez pas besoin d’utiliser deux DIV différentes pour simuler deux colonnes dans la conception de votre page. Vous pouvez appliquer les multiples colonnes de cette façon:

column-count: 2;
column-gap: 15px;
column-rule: 1px solid black;

-moz-column-count: 2;
-moz-column-gap: 15px;
-moz-column-rule: 1px solid black;

-webkit-column-count: 2;
-webkit-column-gap: 15px;
-webkit-column-rule: 1px solid black;

Chaque moteur de rendu principal (comme le gecko de Mozilla et le kit Web de Chrome) a créé sa propre propriété pour prendre en charge cette fonctionnalité, raison pour laquelle vous devez utiliser les différents préfixes -webkit et -moz.

En dehors de cela, vous pouvez également spécifier la largeur de la colonne (au lieu du nombre de colonnes):

-moz-column-width: 300px;
-moz-column-gap: 15px;

-moz-column-width: 300px;
-moz-column-gap: 15px;

-webkit-column-width: 300px;
-webkit-column-gap: 15px;

Dans tous les cas, vous souhaiterez probablement utiliser plusieurs DIV car, malheureusement, Internet Explorer 9 et les versions ultérieures ne prennent pas en charge toute cette magnifique magie multi-colonnes.