如何在添加新元素时保持列数列的排序？

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

您应该使用float: left;属性。有关如何使用它的示例，请参见下文。

＆＃13;

＆＃13;

.parent {
  width: 120px;
}

.block {
  background-color: yellow;
  height: 40px;
  width: 40px;
  margin: 10px;
  float: left;
}

＆＃13;

<div class="parent">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
  <div class="block">5</div>
  <div class="block">6</div>
  <div class="block">7</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

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

.block {
  width: 50%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;