Machen Sie Spalten dynamisch mit divs in vertikaler

Ich brauche dynamisch Spalten vertikal ohne die Container div zu überschreiten. Der Bildlauf der Seite sollte horizontal sein. Nehmen wir das Beispiel here (Spalte 21 sollte nach oben, wie das Bild gezeigt)Machen Sie Spalten dynamisch mit divs in vertikaler

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>

Dank.

Quelle

2015-02-02 soyvli

unklar Frage für mich ... nur 21 muss oben sein? – demo

Überprüfen Sie das Bild, es gibt mehr Divs unter 21 und sie sollten in einer neuen Spalte sein –

Alle von ihnen sind div mit der gleichen Klasse und anderen Text, müssen Sie das gesamte Layout von Ihrem HTML ändern –

Eine mögliche Lösung ist flex zu verwenden:

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>

Referenzen:

2015-02-02 16:36:08

'flex' ist nicht gute Lösung, wenn Autor der Frage IE9 und frühere Version – demo

unterstützen möchte, wenn jemand IE9 oder früher verwendet, sollte er aus dem Internet –

-1

Überprüfen Sie meine Lösung: http://jsfiddle.net/ht48zncu/4/

ersten 20 Artikel i twenty-in-column mit Klasse div senden. Nächste 20 Artikel sende ich auch in ähnliche div.

Und fügen Sie CSS: .twenty-in-column{display:inline-block;vertical-align:top;}

Quelle

2015-02-02 16:39:36 demo

für was ** Minus ** verboten werden? – demo

bekam ich eine Lösung auf Basis von display:flex; es Arbeit ist, sondern kann Sie Kompatibilitäten Probleme haben wird. Ich füge diese in den Behälter:

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

Und das auf den Artikel:

display: flex-box;

Siehe jsfiddle: http://jsfiddle.net/ht48zncu/6/

Quelle

2015-02-02 16:40:27 tomtomtom

Machen Sie Spalten dynamisch mit divs in vertikaler

Antwort

Verwandte Themen