时间戳

首页 > 解决方案 > Html 图像网格取决于变量

html - Html 图像网格取决于变量

问题描述

所以在我的 html 文件中，我有这个变量：{{ images.images_total }}

我想创建一个有 3 行的网格

第一行有3张图片，每张图片占33%宽度

第二行有 2 张图片，一张图片 33 其他 66 宽度%

第三行有 1 张图片占据全宽

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

标签： htmlcss

解决方案

这是使用:nth-childcss 选择器的仅 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 作为一种简单的方法，可以将图像彼此相邻地排成一排，并在必要时进行环绕。

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

.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%。

推荐阅读