html - 创建投资组合元素时的第 n 个子选择器

Question

我知道这个问题可能已经回答过很多次了，但我一直没能找到正确的答案。在这里，也不是谷歌。所以我希望有人可以在这里帮助我。

我正在尝试在网站上制作作品集部分，其中元素将以全宽行堆叠，每行中 50% 是图片，50% 是描述。我想让行从左到右交替混合图像和元素描述(在一排图像在左边，描述在右边，在下一行反之亦然，等等)。我试过使用第 n 个子选择器(奇数/偶数)和第 n 个类型，它一直选择所有 div。

我想我现在自己弄清楚是不是太蠢了，我猜这是一个简单的解决方案，但我被卡住了。

任何关于如何实现它的帮助和/或建议(即使没有第 nth-child)将不胜感激!

fiddle :https://jsfiddle.net/mariopurisic/4qanLbov/

#portfolio-items::after {
  display: block;
  content: '';
  clear: both;
}

.item-image {
  width: 50%;
  overflow: hidden;
  height: 400px;
  margin: 0;
  float: left;
  box-sizing: border-box;
}

.item-image img {
  width: 100%;
}

.item-description {
  width: 50%;
  height: 400px;
  margin: 0;
  float: right;
  padding-left: 2rem;
  box-sizing: border-box;
}

<div id="portfolio-items">

  <div class="portfolio-items">

    <div class="item-image">
      <img src="http://placehold.it/500x500">
    </div>
    <div class="item-description">
      <h5 class="item-title">Item 1</h5>
      <p class="item-text lead">Item 1 Description</p>
    </div>

    <div class="item-image">
      <img src="http://placehold.it/500x500">
    </div>
    <div class="item-description">
      <h5 class="item-title">Item 2</h5>
      <p class="item-text lead">Item 2 Description</p>
    </div>

  </div>
  <!-- .portfolio-items -->

</div>
<!-- #portfolio-items -->

Answer 1

您的想法是对的，但是如果您不将您的投资组合片段与​​它们的描述组合在一起，就会让事情变得更加困难。

尽量不要过多更改您的 HTML，我只是在每个投资组合元素周围添加了 article 标签，然后选择了 article:nth-of-type(even) 和交换了 float 属性。

#portfolio-items:after {
  display: block;
  content: '';
  clear: both;
}

.item-image {
  width: 50%;
  overflow: hidden;
  height: 400px;
  margin: 0;
  float: left;
  box-sizing: border-box;
}

.item-image img {
  width: 100%;
}

.item-description {
  width: 50%;
  height: 400px;
  margin: 0;
  float: right;
  padding-left: 2rem;
  box-sizing: border-box;
}

.portfolio-items article:nth-of-type(even) .item-image {float:right;}
.portfolio-items article:nth-of-type(even) .item-description {float:left;}

<div id="portfolio-items">

  <div class="portfolio-items">

  <article>
    <div class="item-image">
      <img src="http://placehold.it/500x500">
    </div>
    <div class="item-description">
      <h5 class="item-title">Item 1</h5>
      <p class="item-text lead">Item 1 Description</p>
    </div>
  </article>

  <article>
    <div class="item-image">
      <img src="http://placehold.it/500x500">
    </div>
    <div class="item-description">
      <h5 class="item-title">Item 2</h5>
      <p class="item-text lead">Item 2 Description</p>
    </div>
  </article>

  </div>
  <!-- .portfolio-items -->

</div>
<!-- #portfolio-items -->

https://jsfiddle.net/4qanLbov/1/