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

概述我想知道是否有一个CSS选择器会自动神奇地瞄准由flexbox或浮动创建的行上的最后一个div. 在我们的特定用途中,我们有一个具有不同宽度图像的图像网格.在其全宽度中,存在具有3个图像(每个33％)的行和具有2个图像(50/50或60/40)的行.使用垂直平板电脑查看时,所有图像都会变为50％,每行两次,手机100％.所有图像都在一个整体容器内,而不是行容器(因为三个成为两个). 像许多网格类型 我想知道是否有一个css选择器会自动神奇地瞄准由flexBox或浮动创建的行上的最后一个div.

在我们的特定用途中,我们有一个具有不同宽度图像的图像网格.在其全宽度中,存在具有3个图像(每个33％)的行和具有2个图像(50/50或60/40)的行.使用垂直平板电脑查看时,所有图像都会变为50％,每行两次,手机100％.所有图像都在一个整体容器内,而不是行容器(因为三个成为两个).

像许多网格类型布局一样,我们有2％的边距权限,需要在最右边的div上重置为0.

目前使用传统的“last”类手动删除边距,使用伪：nth-​​child(奇数)来 *** 纵垂直平板电脑布局.我正在玩两种变体,一种使用浮动,一种使用flexBox.

是否有一个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我知道我的百分比没有加起来.

解决方法 基本上是@vals said,但有更多细节：

>让所有flex项目具有相同的margin-right,m.
>相应地设置宽度.例如,如果要在一行中设置n个相等的元素,请设置wIDth：calc(100％/ n – m).
>让flex容器溢出其包含块,以隐藏不需要的边距.使用margin：-m来实现这一目标.
>将Flex容器放在包含overflow：hIDden的包装中.

.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%); }

<div >  <div >    <span>100%</span>    <span>49%</span>    <span>49%</span>    <span>39%</span>    <span>59%</span>    <span>32%</span>    <span>32%</span>    <span>32%</span>  </div></div>

总结

以上是内存溢出为你收集整理的html – 在flexbox或float之前定位最后一个div包装其余部分全部内容，希望文章能够帮你解决html – 在flexbox或float之前定位最后一个div包装其余部分所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。