在 flexbox 或 float 包裹其余部分之前定位最后一个 div

Question

我想知道是否有一个 CSS 选择器可以自动神奇地定位由 flexbox 或 float 创建的行上的最后一个 div。

在我们的特定用途中，我们有一个具有不同宽度图像的图像网格。在其全宽度中，有包含 3 个图像的行（每行 33%）和包含 2 个图像的行（50/50 或 60/40）。当使用垂直平板电脑查看时，所有图像都会更改为 50%，并且每行两个，而在手机上则为 100%。所有图像都位于单个整体容器中，而不是行容器中（因为三个变成了两个）。

像许多网格类型布局一样，我们有 2% 的右边距，需要在最右边的 div 上将其重置为 0。

目前使用传统的“last”类手动删除边距，并使用伪 :nth-child(odd) 来操纵垂直平板电脑布局。我正在玩两种变体，一种使用浮动，一种使用弹性盒。

是否有一个 css 选择器可以在每种情况下定位最后一个 div？

---

扩展布局：

在全尺寸显示器上
|img1 - 33%|2%|img2 - 33%|2%|img3 - 33%|
|img4 - 40%|2%|img5 - 60%|
|img6 - 33%|2%|img7 - 33%|2%|img8 - 33%|

在垂直平板电脑上
|img1 - 50%|2%|img2 - 50%|
|img3 - 50%|2%|img4 - 50%|
|img5 - 50%|2%|img6 - 50%|
|img7 - 50%|2%|img8 - 50%|

在电话上
|img1 - 100%|
|img2 - 100%|
|img3 - 100%|
|img4 - 100%|
等等 ps我知道我的百分比没有相加。

Answer 1

基本上就是@vals所说的，但还有一些更多细节：

\n\n

\n
• 让所有弹性项目具有相同的 margin-right, m。
\n
• 相应地设置宽度。例如，如果您希望n一行中的元素相等，请设置width:\xc2\xa0calc(100%/n\xc2\xa0-\xc2\xa0m)。
\n
• 让弹性容器溢出其包含块，以隐藏不需要的边距。使用margin:\xc2\xa0-m来实现这一点。
\n
• 将柔性容器放入带有 的包装纸中overflow:\xc2\xa0hidden。
\n

\n\n

\r\n

\r\n

.wrapper {\r\n  overflow: hidden;\r\n  border: 1px solid;\r\n}\r\n.flex {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  margin-right: -2%;\r\n  text-align: center;\r\n}\r\nspan {\r\n  margin-right: 2%;\r\n  border: 1px solid red;\r\n  box-sizing: border-box;\r\n}\r\nspan:nth-child(-n + 3) { width: calc(100%/2  - 2%); }\r\nspan:nth-child(n + 6)  { width: calc(100%/3  - 2%); }\r\nspan:nth-child(1)      { width: calc(100%    - 2%); }\r\nspan:nth-child(4)      { width: calc(100%*.4 - 2%); }\r\nspan:nth-child(5)      { width: calc(100%*.6 - 2%); }

\r\n

<div class="wrapper">\r\n  <div class="flex">\r\n    <span>100%</span>\r\n    <span>49%</span>\r\n    <span>49%</span>\r\n    <span>39%</span>\r\n    <span>59%</span>\r\n    <span>32%</span>\r\n    <span>32%</span>\r\n    <span>32%</span>\r\n  </div>\r\n</div>

\r\n

\r\n

\r\n

\n