我有以下示例HTML:

<div class="vini">
  <!-- div of class "vino" can be 1 or also 100 times rendered, one below another just like this: -->
  <div class="vino">
  <div class="vino">
  <div class="vino">
  <div class="vino">
</div>

我正在尝试实现以下目标:

用于PC的方案: 所有的应该以某种方式调整显示总是只有3个这些在一行（从左到右）。然后，在下一行中，应该有下3个，依此类推，直到再也没有剩下的了。

移动场景: 所有的内容都应该一个在另一个下面可见--让它们可以从上一直向下滚动，直到不再显示这些内容。

我尝试使用CSS属性，但无法完成。

理想情况下，我希望只通过CSS和HTML（没有JS）来完成这项工作。

请问我该怎么做？

谢谢。

顺晟科技：

以下样式将使您接近所需。

.vini样式将构成该容器，它是屈曲项的子项。

.vino样式将使项目占用100%宽度，然后在屏幕width:768px上，将使它们占用32%宽度，以便在每个项目之间有一点喘息空间（因为100/3=33.3%重复）

<div class="vini">
  <!-- div of class "vino" can be 1 or also 100 times rendered, one below another just like this: -->
  <div class="vino">
  <div class="vino">
  <div class="vino">
  <div class="vino">
</div>