创建投资组合项目时的第 n 个子选择器

Question

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

我正在尝试在网站上制作投资组合部分，其中项目将堆叠成全宽行，每行 50% 是图像，50% 是描述。我想让行可互换地混合图像和项目的描述，从左到右（在一行图像在左侧，描述在右侧，下一行反之亦然，依此类推）。 我尝试使用第 n 个子选择器（奇数/偶数）和第 n 个类型，它一直选择所有 div。

我认为我现在自己解决问题是愚蠢的，我猜这是一个简单的解决方案，但我被卡住了。

任何关于如何实现它的帮助和/或建议（即使没有第 n 个孩子）将不胜感激！

小提琴：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) 并交换了浮动属性。

#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/