按类别将项目分为2列

Question

基本上，我想要一组元素（可以是列表，或者如下所示的div），它们可以按任何顺序排列，但是会根据它们的类自动移动到指定的列中。 例如，我的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 }

我希望能够实现附加图像的布局（元素将拉伸以适应各自内容的高度）：

显然，如果我只是向左或向右浮动元素，它们将与前一个元素内联，而不管＆＃34;列的高度＆＃34;我想把它漂浮进去。

我想到了flexbox，并想知道你是否可以指定2列并将每个元素左右对齐，但我不认为可以指定单个项目的理由。

我得出的结论是，这是不可能的，没有使用javascript动态地将项目分类到列中（例如类似于砌体算法），但我认为我＆＃39;如果有人有任何建议，请在这里提出问题。

Answer 1

基本思路是使用order属性来移动＆＃34; left＆＃34;元素到开头和'＃34;右＆＃34;元素到底。然后我们在它们之间添加一个breaker元素，它足够高，可以强行休息。

＆＃13;

＆＃13;

.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%; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用jQuery轻松实现此目的。 创建两个div＆＃34; left＆＃34;和＆＃34;对＆＃34; 然后根据他们的类来追加孩子的div /元素

# print column[1]+str(counts[column[1]])
#f1.write ("    %s      %s    %s   %.3f   %.3f   %.3f\n" % (column[0], column[1]+str(counts[column[1]]), column[2], float(column[3]), float(column[4]), float(column[5])))
f1.write ("%8s %7s %4s %7.3f %7.3f %7.3f\n" % (column[0], column[1]+str(counts[column[1]]), column[2], float(column[3]), float(column[4]), float(column[5])))

Answer 3

为所有div使用通用的类名称，并根据您的要求添加左侧类

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