html - 可选位置 Div

Question

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

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

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

编辑:目前我正在从 JSON 数组中获取每个“单元格”并将其附加到容器中。因为单元格的数量是动态的，所以我不能简单地追加 Social、Product、Social、Post、Social 并重复，因为代码会很大而且我最终会得到 Social 的副本。

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/