垂直交错 div答案

【问题标题】：Stagger divs vertically垂直交错 div
【发布时间】：2022-01-12 03:11:50
【问题描述】：

有没有办法像这张图片一样以交错的垂直排列显示 div？

到目前为止，我已经使用 Flexbox 接近但不能错开行，因为我不想预先确定每行中有多少个圆圈，我希望用户的浏览器宽度来控制每行有多少个圆圈行（因此圆形 div 上没有类或子项）。

随着用户的浏览器变窄，我希望圆圈做出响应，以便在移动尺寸中它们会变成 1 长的单列。

Here is a Fiddle 显示到目前为止的代码。如果需要，我会对 JQuery 持开放态度。感谢您的帮助。

* {margin: 0; padding: 0;}
body {font-family: Helvetica Neue; font-style: normal; text-align: center; color: #111;}

section {width: 100%; display: flex; flex-direction: column;}
.memoji_list {display: flex; flex-wrap: wrap; flex-direction: row;}
.memoji {background:  green; border-radius:999px; width:100px; height:100px; margin: 0 auto;}

<body>
  
<section>
  <div class="memoji_list">
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>

  </div>
</section>

</body>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

我为hexagon shapes 制作的技巧可以在这里应用：

.main {
  display: flex;
  --s: 100px; /* the circle size */
  --m: 8px;   /* control the distance between circles */
  --vc: 10px; /* control the distance between rows */
  
  --f: calc(2*var(--s) + 4*var(--m) - 2*var(--vc) - 2px);
}

.container {
  font-size: 0; 
}

.container div {
  width: var(--s);
  margin: var(--m);
  height: var(--s);
  display: inline-block;
  font-size: initial;
  border-radius:50%;
  background:red;
  margin-bottom: calc(var(--m) - var(--vc));
}

.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 120%; 
  shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px),#000 0 var(--f));
}

<div class="main">
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

【讨论】：

吉普车！是的，就是这样。我以为这是一个很长的镜头，但你成功了。 Hexagon 的文章读起来也很棒。虽然我很好奇，但浏览器的兼容性是什么。
@Antistandard 浏览器支持应该不错，它涵盖了所有主流浏览器。如果您想要更好的支持，您可以将变量和计算替换为最终值（您可以摆脱 calc() 和 CSS 变量）
嗯，非常感谢 Temani，这是一些不错的代码。变量是甜蜜的。如果我有问题，我会使用硬值而不是你提到的 Calc 和 vars。但再次感谢，这是一项伟大的工作。

【解决方案2】：

.row{
   display:flex;
   justify-content:space-evenly;
   flex-direction:row;
   
   }
   
   .memoji{
   width:100px;
   height:100px;
   background-color:green;
   border-radius:50%;
   }

<div class='row'>
      <div class="memoji">&nbsp;</div>
      
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
     </div>
     <div class='row'> 
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      </div>
     <div class='row'> 
      <div class="memoji">&nbsp;</div>
      
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      </div>

【讨论】：

【解决方案3】：

这不是响应式的（您必须将 sn-p 窗口放大到“整页”大小才能将元素数量放入图像中的行中），但这是一个起点，使用max-width 和 margin: 0 auto 用于容器，margin-left 用于.memoji:nth-child(11n - 4)

然后，您可以使用媒体查询根据窗口宽度使用不同数量的圆圈，并遵循类似的规则。

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica Neue;
  font-style: normal;
  text-align: center;
  color: #111;
}

section {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.memoji_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.memoji {
  background: green;
  border-radius: 999px;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  margin: 10px;
}

.memoji:nth-child(11n - 4) {
  margin-left: 70px;
}

<body>

  <section>
    <div class="memoji_list">
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
      <div class="memoji">&nbsp;</div>
    </div>
  </section>

</body>

【讨论】：