nth-child selector при создании позиций портфеля

Question

Я знаю, что на это, вероятно, уже ответили кучу раз, но я не смог найти правильный ответ. Здесь, и Google, если на то пошло. Поэтому я надеюсь, что кто-то может помочь мне здесь.

Я пытаюсь сделать раздел портфолио на сайте, в котором элементы будут укладываться в строки полной ширины, а в каждой строке 50% будет изображением и этим 50% -ным описанием. Я хотел бы сделать строки взаимозаменяемо смешать изображения и описания элементов слева направо (на одном изображении строки слева и описание справа, а в следующей строке наоборот и т. Д.). Я попытался использовать селектор nth-child (нечетный/четный) и nth-of-type, и он продолжает выбирать все 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) и поменял свойства поплавка.

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