Question

我必须替换顶部：0;和底部：0;

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

这应该是这样的：

出于某种原因，我必须在第一行使用nth-of-type，在第二行使用nth-child。

我的问题是为什么我不能在两行中使用相同的内容？

当我切换它们时，我的布局搞砸了。

我在堆栈上看到this post，但它使用了8个css条目。在我的情况下没有添加任何东西。（如果我不想添加更多城市。）

我的HTML代码:( 8次几乎相同的代码）

    <a class="content-column content-column-quarter link-image favourite" href="#">

            <figure>
                <img src="img/london.jpg" alt="london" />
                <figcaption class="fc_down">London</figcaption>
            </figure>
    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/bangkok.jpg" alt="bangkok" />
                <figcaption class="fc_up">Bangkok</figcaption>
            </figure>
    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/maui.jpg" alt="maui" />
                <figcaption class="fc_down">Maui</figcaption>
            </figure>
    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/paris.jpg" alt="paris" />
                <figcaption class="fc_up">Paris</figcaption>
            </figure>

    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/stockholm.jpg" alt="stockholm" />
                <figcaption class="fc_up">Stockholm</figcaption>
            </figure>

    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/alberta.jpg" alt="alberta" />
                <figcaption class="fc_down">Alberta</figcaption>
            </figure>

    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/nairobi.jpg" alt="nairobi" />
                <figcaption class="fc_up">Nairobi</figcaption>
            </figure>
    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/bruges.jpg" alt="bruges" />
                <figcaption class="fc_down">Bruges</figcaption>
            </figure>
    </a>

我的CSS代码：

#favourites figcaption {
    left: 0;
    padding: 20px;

    font-size: 32px;  }

    .favourite:nth-of-type(-2n + 4) figcaption {
        top: 0;
    }
    .favourite:nth-of-type(-2n + 3) figcaption {
        bottom: 0;
    }
    .favourite:nth-child(2n + 5) figcaption {
        bottom: 0;
    }
    .favourite:nth-child(2n + 6) figcaption {
        top: 0;
    }



.content-column {
    float: left;
    margin-bottom: 30px;
    box-sizing: border-box;  }

    .content-column-full {
        width: 100%;
    }
    .content-column-quarter {
        width: 22%;
        margin-right: 4%;  }

        .content-column-quarter:nth-child(4n+1) {
            margin-right: 0;
        }



.link-image {
    position: relative;  }

    .link-image figure {
        overflow: hidden;  }

        .link-image img {
            width: 100%;
            height: auto;
            transition: transform .2s ease-in-out, filter .2s ease-in-out;
        }
        .link-image figcaption {
            position: absolute;
            color: white;
        }

    .link-image:hover img {
        transform: scale(1.1);
        filter: grayscale(50%);
}

Answer 1

您可以flex使用column，nth-child ，如果您总共有4行，则可以使用。

主要父级上的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 */
}

下面的

https://codepen.io/gc-nomade/pen/QqzrqG或代码段来测试行为：

＆＃13;

.gal {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 50vw;/* height to force wrapping ... 2rows max here */
}
a {
  
  min-width: 17%;
  max-width: 25%;
  min-height:20vw;/*while loading image */
  margin: 0.5vw;
  position: relative;
  flex: 1;
}

a figure,
a img,
a figcaption {
  display: block;
  margin: 0;
  padding: 0;
}
a img {
  width: 100%;
}
a figure figcaption {
  position: absolute;
  padding: 1em;
  font-size:2vw;
  top:1em;
  left: 0;
  right: 0;
  color: red;
  text-shadow: 0 0 1px black;
}
a:nth-child(4n - 3)  figcaption,
a:nth-child(4n - 4)  figcaption {
  bottom:1em;
  top:auto;
}

＆＃13;

<p>images need to be loaded , be patient...</p><div class="gal">
  <a href="#">
    <figure>
      <img src="http://lorempixel.com/400/400/city/1"/>
      <figcaption>My City </figcaption>
    </figure>
  </a>  
  <a href="#">
    <figure>
      <img src="http://lorempixel.com/400/400/city/2"/>
      <figcaption>My City </figcaption>
    </figure>
  </a>
  <a href="#">
    <figure>
      <img src="http://lorempixel.com/400/400/city/3"/>
      <figcaption>My City </figcaption>
    </figure>
  </a>
  <a href="#">
    <figure>
      <img src="http://lorempixel.com/400/400/city/4"/>
      <figcaption>My City </figcaption>
    </figure>
  </a>
  <a href="#">
    <figure>
      <img src="http://lorempixel.com/400/400/city/5"/>
      <figcaption>My City </figcaption>
    </figure>
  </a>
  <a href="#">
    <figure>
      <img src="http://lorempixel.com/400/400/city/6"/>
      <figcaption>My City </figcaption>
    </figure>
  </a>
  <a href="#">
    <figure>
      <img src="http://lorempixel.com/400/400/city/7"/>
      <figcaption>My City </figcaption>
    </figure>
  </a>
  <a href="#">
    <figure>
      <img src="http://lorempixel.com/400/400/city/8"/>
      <figcaption>My City </figcaption>
    </figure>
  </a>
</div>

＆＃13;

Answer 2

如果你的标题方向模式每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;
}

如何切换奇数和偶数 - nth-child和nth-of-type

2 个答案: