Question

因此在我的html文件中，我有以下变量：{{ images.images_total }}

我想创建一个3行的网格

第一行有3张图片，每张图片占据33％的宽度

第二行有2张图像，一个图像33个，其他66个宽度％

第三行有1张图像占据了整个宽度

这是布局，现在想象我的变量是2，它仅填充第一行，如果是5则填充直到第二行，如果大于6，则重复该过程，有什么办法吗？

Answer 1

这是使用:nth-child CSS选择器的HTML和CSS专用解决方案。

：nth-child（n）选择器匹配作为其父项的第n个子项的每个元素（无论类型如何）。

n可以是数字，关键字或公式。

[...]

使用公式（an + b）。说明：a表示一个循环大小，n是一个计数器（从0开始），b是一个偏移值。

引自：https://www.w3schools.com/cssref/sel_nth-child.asp

因此，此CSS代码将前4个图像的宽度设置为33％，第5个图像的宽度设置为66％，第6个图像的宽度设置为100％。然后它循环并为接下来的6张图像执行相同操作，依此类推。

我使用flexbox作为一种简单的方法来将图像彼此相邻放置，并在必要时进行环绕。

使用这种方法，您只需要将图像拖放到类image-row的div中，它们就会自动调整大小。

.image-row {
  display: flex;
  flex-flow: row wrap;
}

.image-row > :nth-child(6n+1), .image-row > :nth-child(6n+4) {
  width: 34%;
}

.image-row > :nth-child(6n+2), .image-row > :nth-child(6n+3) {
  width: 33%;
}
.image-row > :nth-child(6n+5) {
  width: 66%;
}
.image-row > :nth-child(6n) {
  width: 100%;
}

<div class="image-row">
  <img src="https://via.placeholder.com/150"/>
  <img src="https://via.placeholder.com/150"/>
  <img src="https://via.placeholder.com/150"/>
  <img src="https://via.placeholder.com/150"/>
  <img src="https://via.placeholder.com/150"/>
  <img src="https://via.placeholder.com/150"/>
  <img src="https://via.placeholder.com/150"/>
  <img src="https://via.placeholder.com/150"/>
  <img src="https://via.placeholder.com/150"/>
  <img src="https://via.placeholder.com/150"/>
  <img src="https://via.placeholder.com/150"/>
  <img src="https://via.placeholder.com/150"/>
  <img src="https://via.placeholder.com/150"/>
  <img src="https://via.placeholder.com/150"/>
  <img src="https://via.placeholder.com/150"/>
  <img src="https://via.placeholder.com/150"/>
  <img src="https://via.placeholder.com/150"/>
</div>

占位符图像的信用：https://placeholder.com/

编辑：更新了代码段，使其不仅适用于图像，而且适用于.image-row的所有子代。这样，您可以将图像放入表单或链接中。只要包含在其他内容中，请确保将图像的宽度设置为100％。

我还为第一行的第一元素和第二行的第一元素提供了34％的宽度，而不是33％的宽度，因此这些行中所有图片的宽度总计为100％。

HTML图像网格取决于变量

1 个答案: