时间戳

首页 > 解决方案 > 我如何使用 css 或 javascript 在具有动态数量的图片上定位块

javascript - 我如何使用 css 或 javascript 在具有动态数量的图片上定位块

问题描述

定位块

我想用 css 或 javascript 在图片上定位我的块。一行中最多四个块，其他如图所示。我需要什么来实现这一目标。

我试图用 flex 定位它，但 flex 还没有列间隙。也justify-content对我没有帮助，因为这个案例块有不同的差距。也许它可以用网格定位，但我知道你只能用网格区域或网格列硬编码 css 中的值，但它只适用于静态数量。

ul {
  display: grid;
  grid-template-columns: repeat(8, 55px);
  grid-template-rows: 1fr 1fr;
  grid-gap: 25px;
  list-style: none;
}
li {
  width: 100%;
  height: 50px;
  background: #c4c4c4;
  border-radius: 10px;
}
li:nth-child(1) {
  grid-column: 1/3
}
li:nth-child(2) {
  grid-column: 3/5
}
li:nth-child(3) {
  grid-column: 5/7
}
li:nth-child(4) {
  grid-column: 7/9
}
li:nth-child(5) {
  grid-column: 2/4
}
li:nth-child(6) {
  grid-column: 4/6
}
li:nth-child(7) {
  grid-column: 6/8
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

我需要适用于不同数量的解决方案，但现在我只适用于静态

标签： javascripthtmlcssgrid-layout

解决方案

使用 justify-content: center，你必须给它一个边距，这样它们就不会相互粘连。它可以实现，但我不知道你是否愿意。检查我的片段，看看我在说什么。

ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
}

li {
  width: 20%;
  height: 50px;
  background: grey;
  border-radius: 10px;
  margin: 10px;
}
<ul>
  <li></li>
  <li></li>
  <li></li>  
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

推荐阅读