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

Question

我知道这可能已经回答了很多次，但我还没能找到正确的答案。在这里，谷歌也没关系。所以我希望有人可以帮助我。

我正在尝试在网站上制作投资组合部分，其中项目将以全宽行堆叠，并且在每行中50％将是图像，并且通过该50％描述。我想将行从左到右交替混合图像和项目描述（在一行图像在左边，描述在右边，在下一行反之亦然，依此类推）。 我尝试过使用nth-child选择器（奇数/偶数）和nth-of-type，它会继续选择所有div。

我想我现在正在愚蠢地自己解决这个问题，而且我猜它是一个简单的解决方案，但是我被卡住了。

非常感谢任何关于如何实现它的帮助和/或建议（即使没有nth-child）！

小提琴：https://jsfiddle.net/mariopurisic/4qanLbov/

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你有正确的想法，但是你没有通过不将你的投资组合与他们的描述分组来使你自己变得更加困难。

尝试不要过多地更改HTML，我只是在每个项目组合项目周围添加article标记，然后选择article:nth-of-type(even)并交换浮动属性。

＆＃13;

＆＃13;

#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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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