Разделение элементов на 2 столбца по классу

Question

По сути, я хочу набор элементов (может быть список или divs, как показано ниже), которые могут быть организованы в любом порядке, но это автоматически переместится в указанный столбец на основе их класса , Например, мой HTML может быть:

<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> 

Давайте предположим, что цвет фона на каждый классе:

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

И я бы надеяться достичь раскладки прилагаемого изображения (элементы будут растягиваться до соответствовать высоте их соответствующего содержания):

Очевидно, что если я просто плывут элементы влево или вправо, они будут wrap inline с предыдущим элементом, независимо от высоты «столбца», в который я хочу поместить его.

Я думал о flexbox и задавался вопросом, можете ли вы указать 2 столбца и выровнять каждый элемент как влево, так и вправо, но я не думаю, что можно указать обоснование отдельного элемента.

Я пришел к выводу, что это не будет возможно, если не использовать javascript для сортировки элементов в столбцах динамически (например, аналогично алгоритму каменной кладки), но я думал, что задал бы вопрос здесь в случае, если у кого-то есть предложения.

Answer 1

Вы можете легко достичь этого, используя jQuery. Создайте две дивы «влево» и «вправо» а затем appendTo ребенок DIVS/элементы в зависимости от их класса

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

Answer 2

Использовать имя общего класса для всех DIV и в соответствии с вашим требованием добавить влево правильный класс также

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

Answer 3

Основная идея состоит в том, чтобы использовать свойство order для перемещения «левых» элементов в начало и «правые» элементы до конца. Затем мы добавим элемент breaker, расположенный между ними, который достаточно высок, чтобы заставить перерыв.

.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>