如何在响应式网格布局中选择每一行中的最后一个单元格？答案

【问题标题】：How do you select the last cell in every row in a responsive grid layout?如何在响应式网格布局中选择每一行中的最后一个单元格？
【发布时间】：2022-02-10 06:55:03
【问题描述】：

我制作了一个响应式网格布局，其中列数根据此规范自动调整，模板行不明确：

grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));

如果你想仔细看看，这里是网站(https://vahid1919.github.io/#explanation)

我创建了一个伪类，当我将鼠标悬停在卡片上时，它会在右上角显示标签。我想不通的是如何编写选择器，如果卡片是网页上最右边的卡片，标签会出现在左上角。如果我想在用户悬停时显示更具描述性（更大）的元素，这很有帮助。

This is what site situation looks like 我希望行中的最后一个单元格在左侧显示标签。我该如何选择。或者，如果我不能，请指出正确的方向，也许如果我需要使用 Javascript...我在这方面相当菜鸟。

【问题讨论】：

标签： html css css-selectors css-grid responsive

【解决方案1】：

首先，您需要将 jQuery 添加到您网站的标题中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

然后您可以添加以下脚本，该脚本将使用名为“partners-grid-items”的类标识最后一个元素，选择该元素的类名为“tags”的子元素并修改css以将其定位到左边（你可能需要调整这部分）。

$(document).ready(function () {
      $('.partners-grid-items:last-child').children('.tags').css('right', '100%');
});

PS - 您最后一个 .tag 用于教育的位置与您的 css 中应用于其他人的位置不同。

【讨论】：