另外，位置分区

Question

我目前正在编写一个主页，其中包含指向产品，新闻和社交媒体的链接。我要做的是让社交媒体领域每两年出现一次，但绝不会低于自我;

我得到的实际结果是
社交|产品|社交|新闻
社交|新闻|社交|产品

实现这一目标的最佳方法是什么？

编辑：目前我正在抓取每个小组＆＃39;从JSON数组并将其附加到容器。因为细胞的数量是动态的，所以我不能简单地追加社交，产品，社交，帖子，社交和重复，因为代码会很大，我最终会重复社交。

Answer 1

使用每行奇数个元素创建元素时，交错元素。

<div id="container">
  <div class="news">
  </div>
  <div class="social">
  </div>
  <div class="product">
  </div>
  <div class="social">
  </div>
  <div class="news">
  </div>
  <!-- second row -->
  <div class="social">
  </div>
   <div class="product">
  </div>
  <div class="social">
  </div>
  <div class="news">
  </div>
  <div class="social">
  </div>
</div>

然后你可以使用flex来包装它们。

#container {
  max-width: 500px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap
}

.news, .social, .product {
  min-width: 100px;
  height: 100px;
}

.news {
  background-color: blue;
}
.social {
  background-color: red;
}
.product {
  background-color: green;
}

https://jsfiddle.net/7ep3skds/