Crea colonne dinamicamente con div in verticale

Ho bisogno di colonne dinamicamente verticalmente senza superare il div contenitore. Il rotolo della pagina dovrebbe essere orizzontale. Prendiamo l'esempio here (colonna 21 deve muoversi come mostrato nell'immagine)Crea colonne dinamicamente con div in verticale

Image: http://i.stack.imgur.com/f2zWQ.png

html, body { 
 
     width: 100%; 
 
     height: 100%; 
 
     overflow: hidden; 
 
    } 
 

 
    #contenedor-principal { 
 
     height: 500px; 
 
     background-color: lightgray; 
 
    } 
 

 
    .columna { 
 
     width: 200px; 
 
     height: 100%; 
 
    } 
 

 
    .nivel { 
 
     width: 150px; 
 
     min-height: 20px; 
 
     margin: 5px; 
 
     color:white; 
 
    } 
 

 
    .nivel1 { 
 
     background-color: green; 
 
    } 
 

 
    .nivel2 { 
 
     background-color: red; 
 
    } 
 

 
    .nivel3 { 
 
     background-color: yellow; 
 
    } 
 

 
    .nivel4 { 
 
     background-color: aqua; 
 
    } 
 

 
    .nivel5 { 
 
     background-color: black; 
 
    }

<div id="contenedor-principal"> 
 
    <div class="nivel nivel1"> 
 
     1 
 
    </div> 
 
    <div class="nivel nivel2"> 
 
     2 
 
    </div> 
 
    <div class="nivel nivel3"> 
 
     3 
 
    </div> 
 
    <div class="nivel nivel4"> 
 
     4 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     5 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     6 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     7 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     8 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     9 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     10 
 
    </div> 
 

 
    <div class="nivel nivel5"> 
 
     11 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     12 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     13 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     14 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     15 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     16 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     17 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     18 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     19 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     20 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     21 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     22 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     23 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     24 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     25 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     26 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     27 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     28 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     29 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     30 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     31 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
     32 
 
    </div> 
 
</div>

Grazie.

fonte

2015-02-02 soyvli

questione poco chiara per me ... solo 21 deve essere al top? – demo

controllare l'immagine, ci sono più div al di sotto 21 e dovrebbero essere in una nuova colonna –

Tutti sono div con la stessa classe e testo diverso, si dovrà cambiare l'intero layout di ur HTML –

Una possibile soluzione è quella di utilizzare flex:

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
#contenedor-principal { 
 
    height: 500px; 
 
    background-color: lightgray; 
 
    display: flex; /*set display to flex*/ 
 
    flex-direction: column; /*flex direction colum*/ 
 
    flex-wrap: wrap; /*flex wrap*/ 
 
    align-content: flex-start; /*add align content flex start*/ 
 
} 
 
.columna { 
 
    width: 200px; 
 
    height: 100%; 
 
} 
 
.nivel { 
 
    width: 150px; 
 
    min-height: 20px; 
 
    margin: 5px; 
 
    color: white; 
 
} 
 
.nivel1 { 
 
    background-color: green; 
 
} 
 
.nivel2 { 
 
    background-color: red; 
 
} 
 
.nivel3 { 
 
    background-color: yellow; 
 
} 
 
.nivel4 { 
 
    background-color: aqua; 
 
} 
 
.nivel5 { 
 
    background-color: black; 
 
}

<div id="contenedor-principal"> 
 

 
    <div class="nivel nivel1"> 
 
    1 
 
    </div> 
 
    <div class="nivel nivel2"> 
 
    2 
 
    </div> 
 
    <div class="nivel nivel3"> 
 
    3 
 
    </div> 
 
    <div class="nivel nivel4"> 
 
    4 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    5 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    6 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    7 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    8 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    9 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    10 
 
    </div> 
 

 
    <div class="nivel nivel5"> 
 
    11 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    12 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    13 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    14 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    15 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    16 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    17 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    18 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    19 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    20 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    21 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    22 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    23 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    24 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    25 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    26 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    27 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    28 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    29 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    30 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    31 
 
    </div> 
 
    <div class="nivel nivel5"> 
 
    32 
 
    </div> 
 
</div>

Riferimenti:

2015-02-02 16:36:08

'flex' non è buona soluzione se l'autore di domanda desidera supportare IE9 e la precedente versione – demo

se qualcuno utilizza IE9 o versioni precedenti deve essere escluso da Internet –

-1

leggi la mia soluzione: http://jsfiddle.net/ht48zncu/4/

primi 20 articoli mando a div con classe di twenty-in-column. Successivo 20 articoli invio anche a div simili

E aggiungere css: .twenty-in-column{display:inline-block;vertical-align:top;}

fonte

2015-02-02 16:39:36 demo

per quale ** meno **? – demo

Ho una soluzione basata su display:flex; è un lavoro, ma può essere avrete problemi Compatibili. Aggiungo questo per il contenitore:

display: flex; 
flex-direction:column; 
align-content: flex-start; 
flex-wrap: wrap;

E che alle voci:

display: flex-box;

Vedere il jsfiddle: http://jsfiddle.net/ht48zncu/6/

fonte

2015-02-02 16:40:27 tomtomtom

Crea colonne dinamicamente con div in verticale

risposta

Problemi correlati