Disposition des colonnes en HTML (5) / CSS

Est-il un moyen en HTML5/CSS pour avoir les colonnes placées comme indiqué ci-dessous, et ont encore le flux de texte correctement?

######  ######
# C1 #  # C2 #
#    #  #    #
######  ######

######  ######
# C3 #  # C4 #
#    #  #    #
######  ######

######  ######
# C5 #  # C6 #
#    #  #    #
######  ######

Juste pour clarifier - je veux être capable d'écrire tout le texte à l'intérieur d'un seul élément et la CSS créer les colonnes.

source d'informationauteur Charlie

  1. 11

    Bien qu'il utilise un seul élément, mais les pauses doivent être définies manuellement.

    Utiliser le colonne de durée de de la propriété et de l'utilisation d'un élément comme <br /> pour définir la verticale des points d'arrêt. Le contenu de l'apparence et de rendre environ:

    <p>
  CSS3 multi
  <br/>
  columns are
  <br />
  just awesome.
</p>

CSS3    | multi
-----------------
columns | are
-----------------
just    | awesome

    CSS ressemble:

    p {
    column-count: 2;
    column-rule: 1em solid black;
}

br {
    column-span: all;
}

    Ajouter au navigateur de préfixes (-webkit, -moz) en conséquence. column-span peut ne pas être supporté par tous les navigateurs d'aujourd'hui. Voir ce l'article pour plus de détails. Voici mon faible tentative qui ne fonctionne pas sur Chrome.

  2. 7

    Si vous utilisez HTML5, alors je suppose que vous êtes OK à l'aide de CSS3:

    <style>
  .columns{
    -webkit-column-count: 2;
    -webkit-column-rule: 0px;
    -moz-column-count: 2;
    -moz-column-rule: 0px;
  }
</style>

<div class="containter">
  <div class="columns">
    <div>C1</div>
    <div>C2</div>
  </div>
  <div class="columns">
    <div>C3</div>
    <div>C4</div>
  </div>
  <div class="columns">
    <div>C5</div>
    <div>C6</div>
  </div>
</div>
...

    Mais pour être honnête, je pense que vous êtes mieux en flottant juste 6 divs dans une zone de deux fois la largeur des divs:

    <style>
  .containter{
    width: 300px;
  }
  .containter div{
    width: 150px;
    float: left;
  }
</style>

<div class="containter">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
  3. 1

    Pour NE CSS3 solution utiliser le plugin jQuery:
    http://welcome.totheinter.net/columnizer-jquery-plugin/

    Exemple: http://welcome.totheinter.net/autocolumn/sample1.html

    Il travaille pour IE6+, FF2+, safari, chrome, opera 🙂