Css 如何切换奇数和偶数-第n个子项和第n个类型

我必须替换顶部：0；底部：0

但我的第二行是第一行的镜像

它应该是这样的：

出于某种原因，我必须在第一行中使用

nth of type

，在第二行中使用

nth child

• 我的问题是为什么不能对两行使用相同的

当我切换它们时，我的布局被弄乱了

我在堆栈上看到了，但它使用了8个css条目。这对我来说没有任何意义。（如果我不打算添加更多城市。）

我的HTML代码：（几乎是相同代码的8倍）

---

如果总是有两行4项，则可以使用

列中的
flex
和
第n个子项
（否则请澄清）

主父级上的
id
或
class
应足以设置重复结构的样式

需要基本的CSS

a {
  position: relative;
}

a figure figcaption {
  position: absolute;
  top:1em;
  left: 0;
  right: 0;    
}

a:nth-child(4n - 3)  figcaption,
a:nth-child(4n - 4)  figcaption {
  bottom:1em;
  top:auto;/* reset top value */
}

或下面的代码片段来测试行为：


.gal{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
高度：50vw；/*强制包装的高度…此处最大下降2*/
}
a{
最小宽度：17%；
最大宽度：25%；
最小高度：20vw；/*加载图像时*/
利润率：0.5vw；
位置：相对位置；
弹性：1；
}
一个数字，
一个img，
飞行卡普顿{
显示：块；
保证金：0；
填充：0；
}
img{
宽度：100%；
}
人形图{
位置：绝对位置；
填充：1em；
字体大小：2vw；
顶部：1米；
左：0；
右：0；
颜色：红色；
文本阴影：0 1px黑色；
}
第N个孩子（4n-3）figcaption，
第n个孩子（4n-4）figcaption{
底部：1米；
顶部：自动；
}
需要加载图像，请耐心等待

如果总是有两行4项，则可以在
列中使用
flex
和
n子项
（否则请澄清）

主父级上的
id
或
class
应足以设置重复结构的样式

需要基本的CSS

a {
  position: relative;
}

a figure figcaption {
  position: absolute;
  top:1em;
  left: 0;
  right: 0;    
}

a:nth-child(4n - 3)  figcaption,
a:nth-child(4n - 4)  figcaption {
  bottom:1em;
  top:auto;/* reset top value */
}

或下面的代码片段来测试行为：


.gal{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
高度：50vw；/*强制包装的高度…此处最大下降2*/
}
a{
最小宽度：17%；
最大宽度：25%；
最小高度：20vw；/*加载图像时*/
利润率：0.5vw；
位置：相对位置；
弹性：1；
}
一个数字，
一个img，
飞行卡普顿{
显示：块；
保证金：0；
填充：0；
}
img{
宽度：100%；
}
人形图{
位置：绝对位置；
填充：1em；
字体大小：2vw；
顶部：1米；
左：0；
右：0；
颜色：红色；
文本阴影：0 1px黑色；
}
第N个孩子（4n-3）figcaption，
第n个孩子（4n-4）figcaption{
底部：1米；
顶部：自动；
}
需要加载图像，请耐心等待

如果您的标题方向模式每8项重复一次，为什么不使用类似的方式

.favourite figcaption  {
    top: 0;
}
.favourite:nth-of-type(8n + 1) figcaption,
.favourite:nth-of-type(8n + 3) figcaption,
.favourite:nth-of-type(8n + 6) figcaption,
.favourite:nth-of-type(8n + 8) figcaption {
    top: auto;
    bottom: 0;
}

如果您的标题方向模式每8项重复一次，为什么不使用类似的方式

.favourite figcaption  {
    top: 0;
}
.favourite:nth-of-type(8n + 1) figcaption,
.favourite:nth-of-type(8n + 3) figcaption,
.favourite:nth-of-type(8n + 6) figcaption,
.favourite:nth-of-type(8n + 8) figcaption {
    top: auto;
    bottom: 0;
}

图片是期望的效果，还是从左到右镜像顶部行中显示的位置的期望效果？图片是应该的。图片是期望的效果，还是从左到右镜像顶部行中显示的位置的期望效果？图片是应该的。谢谢，当我将所有设置为顶部时出现问题：0；然后尝试底部：0；现在我必须使用top:auto来重置。谢谢，我在将所有设置为top:0时遇到了问题；然后尝试底部：0；现在我必须使用top:auto来重置。当
left
已经设置为0时，为什么要将
right
设置为0？我花了一段时间才知道为什么（4n-3）和（4n-4）会得到这个结果。但是你的城市不是从左到右，而是从上到下，因为
flex-direction:column。我不知道。如果你使用“flex”css属性，请记住IE10和IE11并不完全支持它们。参见@Halfacht，我使用了左：0和右：0；以最有效的大小调整绝对容器的大小。这样，您可以添加边距、边框和填充，而无需担心。宽度计算是自行完成的。如果设置：left:0+width:100%，边距（如果有）、边框（如果有）和填充（如果有）以及框大小（如果没有重新设置）在哪里。事实上，这是一种简单、高效且智能的确定绝对容器大小的方法；）当
left
已经设置为0时，为什么要将
right
设置为0？我花了一段时间才知道为什么（4n-3）和（4n-4）会得到这个结果。但是你的城市不是从左到右，而是从上到下，因为
flex-direction:column。我不知道。如果你使用“flex”css属性，请记住IE10和IE11并不完全支持它们。参见@Halfacht，我使用了左：0和右：0；以最有效的大小调整绝对容器的大小。这样，您可以添加边距、边框和填充，而无需担心。宽度计算是自行完成的。如果设置：left:0+width:100%，边距（如果有）、边框（如果有）和填充（如果有）以及框大小（如果没有重新设置）在哪里。事实上，这是一种简单、高效且智能的确定绝对容器大小的方法；）