HTML & amp; CSS: Vertical Flow Layout (style en colonnes), comment implémenter?

La norme CSS/html positionnement de "fluide" les Éléments à l'horizontale (ligne de base) => float:left;. De quoi ai-je besoin de le faire, afin de les positionner comme le montre l'exemple ci-dessous (en colonnes de style). Existe-il des CSS des balises pour définir ce quelque part? (Idéalement, je ne veux pas l'installation d'une grille, ce qui devrait se produire de la même façon automatiquement lilke il n'en float:left, style...)

+---------------------------+
|  DivBox1                  |
|  DivBox2                  |
|  DivBox3                  |
+---------------------------+

Après l'ajout: 2 boîtes:

+----------------------------+
|  DivBox1  DivBox4          |
|  DivBox2  DivBox5          |
|  DivBox3                   |
+----------------------------+

Enfin, après l'ajout de 2 boîtes, il devrait ressembler à ceci:

+-----------------------------+
|  DivBox1  DivBox4  DivBox7  |
|  DivBox2  DivBox5           |
|  DivBox3  DivBox6           |
+-----------------------------+

source d'informationauteur user1145216

  1. 12

    Il est CSS3 Colonnes (pour l'effet de vous parler, le Équilibrage De Hauteur section est une bonne chose de lire) qui est pris en charge dans les navigateurs les plus récents et ressemblerait à quelque chose comme

    #box {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}

    Et de soutien 10 IE, FF et Chrome.

    Ou, vous pouvez utiliser un outil comme Masonry.js pour obtenir colonne comme des effets sur une page (même si cela nécessite de JS de travail) et de soutien de plus en plus de navigateurs.

  2. 0

    Ajouter une classe à chacun des divs et de style avec quelque chose comme:

    .myDiv
{
  width: 33%;
  float: left;
}
  3. 0

    De nos jours, le problème peut être résolu d'une manière plus flexible à l'aide de Flexbox mise en page. Nécessite le plus récent et le plus grand navigateur (IE 11+).

    http://www.sketchingwithcss.com/samplechapter/cheatsheet.html#column

    http://philipwalton.github.io/solved-by-flexbox/