Teilen von Elementen in Spalten mit einer bestimmten Anzahl von Elementen in jeder Spalte (html, css, javascript)

Question

Ich versuche ein Layout mit Elementen (Eingabefelder in diesem Fall) zu erstellen, wo der Benutzer so viele von ihnen hinzufügen kann wie sie wollen, und auch sie entfernen. Die Elemente gehen in Spalten und jede Spalte kann maximal 4 Elemente haben. Hier ist eine einfache Version, ohne die Säule Funktionalität https://jsfiddle.net/khfpp2vL/2/

Wenn es 4 Elemente ist, sollte es so aussehen:

[1] 
[2] 
[3] 
[4] 

Wenn ein fünftes Element hinzugefügt wird, sollte es in einer eigenen Spalte sein:

[1][5] 
[2] 
[3] 
[4] 

Und mit mehr Elementen:

[1][5][9] 
[2][6][10] 
[3][7] 
[4][8] 

Und so auf.

Ich kann keine Wrapper erstellen und habe jeweils vier Elemente, denn wenn Elemente aus der Mitte entfernt werden, müssen diejenigen, die übrig sind, zu einer anderen Spalte wechseln können. Zum Beispiel, wenn ich 3 und 6 aus dem vorherigen Beispiel zu entfernen, würde es

ändern

[1][7] 
[2][8] 
[4][9] 
[5][10] 

ich css Spalten habe versucht, so etwas wie diese http://jsfiddle.net/NJ4Hw/ (nicht von mir erstellt). Aber das Problem ist, dass ich die Menge der Elemente in jeder Spalte nicht kontrollieren kann. Ich kann die Anzahl der Spalten mit JavaScript ändern, wenn die Anzahl der Elemente durch 4 teilbar ist, also habe ich die richtige Anzahl an Spalten, aber ich entferne zum Beispiel alles außer 9 Elementen in der Geige und ändere die Anzahl der Spalten auf drei. es wird sie ebenso wie diese unterteilen:

[1][4][7] 
[2][5][8] 
[3][6][9] 

Und ich brauche es noch in den ersten Spalten 4 Elemente haben:

[1][5][9] 
[2][6] 
[3][7] 
[4][8] 

ich auch eine Lösung gedacht, wo die Eltern eine maximale Höhe hat und nur vier Elemente würden vertikal passen, aber ich konnte nicht herausfinden, wie man sie so anordnet. Wenn ich zum Beispiel Floats verwende, schwebt es 1 und 2 nebeneinander, wenn der Platz leer ist.

Also ich bin mir nicht sicher, was ich als nächstes versuchen soll. Flexbox? Eine Art Javascript-Lösung? Oder gibt es eine super einfache Lösung, an die ich nicht gedacht habe?

Answer 1

Das mit CSS flex Box getan werden kann. Ich habe eine schnelle Version zusammengestellt. Sie können lernen, es zu optimieren, um es so zu bekommen, wie Sie es wollen.

http://codepen.io/aaronbalthaser/pen/vKXVvm

Ich habe die folgende CSS Code:

.inputs { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
     -ms-flex-direction: column; 
      flex-direction: column; 
    -webkit-flex-wrap: wrap; 
     -ms-flex-wrap: wrap; 
      flex-wrap: wrap; 
    height: 120px; 
    width: 100%; 
} 

.container { 
    -webkit-align-self: flex-start; 
     -ms-flex-item-align: start; 
      align-self: flex-start; 
} 

Answer 2

Ich habe versucht, CSS-Spalten, so etwas wie diese http://jsfiddle.net/NJ4Hw/ (nicht von mir erstellt). Aber das Problem ist, dass ich die Menge der Elemente in jeder Spalte nicht kontrollieren kann.

Sie können, indem die Höhe der Elemente zu steuern und die Höhe der Spalten in Ihrem Container:

.container { 
 
    -moz-column-count: 4; 
 
    -moz-column-gap: 20px; 
 
    -webkit-column-count: 4; 
 
    -webkit-column-gap: 20px; 
 
    column-count: 4; 
 
    column-gap: 20px; 
 
    height: 5em; 
 
} 
 
.container > input { 
 
    height: 1em; 
 
    margin: 0; 
 
}

<!--[if lt IE 10]> 
 
<style> 
 
/* This is copied from the Fiddle you referenced, I presume it's a 
 
    fallback for IE9 and earlier not supporting columns or some such 
 
*/ 
 
.container > input { 
 
    width: 25%; 
 
    float: left 
 
} 
 
</style> 
 
<![endif]--> 
 
<div class="container"> 
 
    <input type="text" value="Item 1"> 
 
    <input type="text" value="Item 2"> 
 
    <input type="text" value="Item 3"> 
 
    <input type="text" value="Item 4"> 
 
    <input type="text" value="Item 5"> 
 
    <input type="text" value="Item 6"> 
 
    <input type="text" value="Item 7"> 
 
    <input type="text" value="Item 8"> 
 
    <input type="text" value="Item 9"> 
 
    <input type="text" value="Item 10"> 
 
    <input type="text" value="Item 11"> 
 
    <input type="text" value="Item 12"> 
 
    <input type="text" value="Item 13"> 
 
    <input type="text" value="Item 14"> 
 
    <input type="text" value="Item 15"> 
 
    <input type="text" value="Item 16"> 
 
    <input type="text" value="Item 17"> 
 
    <input type="text" value="Item 18"> 
 
    <input type="text" value="Item 19"> 
 
    <input type="text" value="Item 20"> 
 
    <input type="text" value="Item 21"> 
 
    <input type="text" value="Item 22"> 
 
    <input type="text" value="Item 23"> 
 
</div>

Offensichtlich möchten Sie zwicken, es zu machen gut aussehen.:-)

Answer 3

Sie können die JS in Ihrem ersten jsfiddle an folgende bearbeiten:

$('.add').on('click', function() { 
    if($('.inputs:last .container').length > 3){ 
    $('.inputs:last').last().after('<div class="inputs"></div>'); 
    }; 
    $('.inputs:last').append(' \ 
    <div class="container"> \ 
     <input type="text" class="input"> \ 
     <button class="remove">Remove</button> \ 
    </div>' 
    ); 
}); 

Und das zu Ihrem Stylesheet hinzu:

.inputs { float: left; }