Trennen von Elementen in 2 Spalten nach Klasse

Question

Im Wesentlichen möchte ich eine Reihe von Elementen (könnte eine Liste oder divs wie folgt), die in einer beliebigen Reihenfolge angeordnet werden können, aber das wird automatisch in eine angegebene Spalte basierend auf ihrer Klasse verschoben . Zum Beispiel kann mein HTML sein:

<div class="left"></div> 
<div class="left"></div> 
<div class="right"></div> 
<div class="left"></div> 
<div class="left"></div> 
<div class="right"></div> 
<div class="right"></div> 
<div class="left"></div> 

Lassen Sie uns auf jede Klasse eine Hintergrundfarbe annehmen:

.left{ background:red } 
.right{ background:blue } 

Und ich würde hoffen, werden ein Layout das beigefügte Bild zu erreichen (die Elemente dehnen zu passen die Höhe ihrer jeweiligen Inhalt):

Natürlich, wenn ich einfach Elemente links oder rechts schweben, werden sie Zeilenumbruch mit dem vorherigen Element, unabhängig von der Höhe der "Spalte", in die ich es einfügen möchte.

Ich dachte über Flexbox nach, und fragte mich, ob Sie zwei Spalten angeben und jedes Element entweder nach links oder rechts ausrichten könnten, aber ich denke nicht, dass es möglich ist, die Ausrichtung eines einzelnen Elements anzugeben.

Ich komme zu der Schlussfolgerung, dass dies nicht möglich sein wird, kurz mit Javascript, um Elemente in Spalten dynamisch zu sortieren (zB ähnlich einem Mauerwerk-Algorithmus), aber ich dachte, ich würde die Frage hier stellen falls jemand Vorschläge hat.

Answer 1

Sie können dies leicht mit jQuery erreichen. Erstellen Sie zwei divs „links“ und „rechts“ Und dann

if ($("#mydiv").hasClass("left")){ 
$("#mydiv").appendTo(".left-container"); 
} 

Answer 2

Verwenden gemeinsamen Klassenname für alle div appendTo Kind divs/Elemente auf ihrer Klasse abhängig und wie pro Ihre Anforderung auch richtige Klasse links add

if($('.parentDiv).hasClass('left')) { 
    $('.parentDiv).css("float", "left");    
} else { 
    $('.parentDiv').css("float", "right");    
} 

Answer 3

Die Grundidee besteht darin, mit der Eigenschaft order die Elemente "left" an den Anfang und die Elemente "right" an das Ende zu verschieben. Dann fügen wir ein breaker Element hinzu, das groß genug ist, um eine Pause zu erzwingen.

.block { width: 200px; margin: 20px; } 
 
.left { order: 1; background: pink; } 
 
.right { order: 3; background: cyan; } 
 
.container { display: flex; flex-direction: column; flex-wrap: wrap; height: 1000px; } 
 
.breaker { order: 2; flex-basis: 100%; }

<div class="container"> 
 
    <div class="left block">Now is the time for all good men.</div> 
 
    <div class="right block">Ipsum lorem.</div> 
 
    <div class="right block">ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto</div> 
 
    <div class="left block"> occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum</div> 
 
    <div class="left block">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> 
 
    <div class="breaker"></div> 
 
</div>