jquery - 添加新元素时如何保持列数列排序？

Question

我有一个带有“加载更多”功能的页面。我使用 column-count CSS 属性将其分为两列。

当我点击加载更多时，前 4 个 div 更改排序并且它们都在第一列中。检查下图或 https://elodywedding.com/reviews1

我需要前 4 个 div 留在同一个地方，只附加其余部分。

是否有适用于大多数浏览器的解决方案或解决方法？

.parrent {
    column-count: 2;
}

<div class="parrent">
    <div class="block">content 1</div>
    <div class="block">content 2</div>
    <div class="block">content 3</div>
    <div class="block">content 4</div>
</div>

Answer 1

我建议你使用flexbox。查看指南here

.parrent{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  }

.block {
  width: 50%;
}

<div class="parrent">
<div class="block">content 1</div>
<div class="block">content 2</div>
<div class="block">content 3</div>
<div class="block">content 4</div>
</div>