关于html：在flexbox或float之前定位最后一个div包装其余部分


Targeting the last div before flexbox or float wraps the rest

我想知道是否有一个CSS选择器可以自动将flexbox或float创建的行中的最后一个div作为目标。

在我们的特殊用途中，我们有一个具有不同宽度图像的图像网格。在其全宽范围内，有3个图像的行(每个33%)和2个图像的行(50/50或60/40)。使用垂直平板电脑查看时，所有图像都会更改为50%，每行两张，在手机上为100%。所有图像都在一个整体容器中，而不是行容器(因为三个容器变为两个)。

像许多网格类型的布局一样，我们有2%的页边距权限，需要在最右边的分区重置为0。

目前使用传统的"last"类来手动删除页边距，并使用伪：nth子级(奇数)来操作垂直平板布局。我在玩两个变种，一个使用浮球，一个使用flexbox。

在每种情况下，是否有一个针对最后一个DIV的CSS选择器？

扩展布局：

在全尺寸显示器上| 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%|

在电话上IIMG1—100%IIMG2—100%iMg3-- 100%IMG4—100%等我知道我的百分比不加起来。

相关讨论

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

  • 让所有弹性项目都有相同的利润率，m。
  • 相应地设置宽度。例如，如果要在一行中使用n相等元素，请设置width: calc(100%/n - m)。
  • 让flex容器溢出其包含块，以隐藏不需要的边距。使用margin: -m来实现这一点。
  • 将柔性容器放在带有overflow: hidden的包装器中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.wrapper {
  overflow: hidden;
  border: 1px solid;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  margin-right: -2%;
  text-align: center;
}
span {
  margin-right: 2%;
  border: 1px solid red;
  box-sizing: border-box;
}
span:nth-child(-n + 3) { width: calc(100%/2  - 2%); }
span:nth-child(n + 6)  { width: calc(100%/3  - 2%); }
span:nth-child(1)      { width: calc(100%    - 2%); }
span:nth-child(4)      { width: calc(100%*.4 - 2%); }
span:nth-child(5)      { width: calc(100%*.6 - 2%); }
1
2
3
4
5
6
7
8
    <span>100%</span>
    <span>49%</span>
    <span>49%</span>
    <span>39%</span>
    <span>59%</span>
    <span>32%</span>
    <span>32%</span>
    <span>32%</span>

相关讨论

不，没有一个很酷的CSS选择器可以实现这一点。

我知道的唯一容易得到这个效果的方法是设置一个包装到您的flexbox容器。

让flexbox容器中的所有元素具有相同的2%右边距。

并将flexbox容器设置为包装器右侧有2%的溢出，这将被隐藏。所以你会有这样的错觉：元素与包装器的右边框对齐。

相关讨论