Как поменять блоки местами при каждом четном элементе?

318

07 марта 2017, 13:45

На сайте реализована выдача товаров из БД, где есть картинка, имя и описание. Все в одном блоке: картинка с левой стороны, а имя и описание с правой стороны.

@foreach (var p in @Model.Gdss)
{
  @Html.Partial("GdsSummary", p)
}

Вот GdsSummary:

<section class="textblock">
  <div class="wrap">
    <div class = "pic">
      @if (Model.ImageData != null)
      {
        <img src="@Url.Action("GetImage", "Gds", new { Model.GdsId })" />
      }
    </div>
    <div class="gds">           
      <h2>@Model.Name</h2>
      <p>@Model.Description</p>   
    </div>
  </div>
</section>

Хотелось бы сделать следующее: допустим, в базе 7 товаров. Нужно чтобы каждый четный менял положение картинки (class="pic") и описания (class="gds") т.е. чтобы на 2, 4 и 6 товарах картинка и описание менялись местами.

В CSS есть селектор nth-child возможно ли им реализовать задуманное и как? Возможно ли как-то указать, чтобы он менял именно <div class = "pic"> и <div class="gds"> в этом textblock? Если так не получится, то как в принципе менять местами картинку и описание на четных элементах?

Заранее очень благодарю за ответ!

Answer 1

Добавьте css, вроде моего:

.wrap { 
  display: flex; 
} 
 
.pic { 
  margin-right: 16px; 
} 
 
.textblock:nth-child(even) .wrap { 
  flex-direction: row-reverse; 
} 
 
.textblock:nth-child(even) .wrap .pic { 
  margin-right: 0; 
  margin-left: 16px; 
}

<section class="textblock"> 
  <div class="wrap"> 
    <div class="pic"> 
      <img src="http://beerhold.it/100/100" /> 
    </div> 
    <div class="gds"> 
      <h2>@Model.Name</h2> 
      <p>@Model.Description</p> 
    </div> 
  </div> 
</section> 
<section class="textblock"> 
  <div class="wrap"> 
    <div class="pic"> 
      <img src="http://beerhold.it/100/100" /> 
    </div> 
    <div class="gds"> 
      <h2>@Model.Name</h2> 
      <p>@Model.Description</p> 
    </div> 
  </div> 
</section> 
<section class="textblock"> 
  <div class="wrap"> 
    <div class="pic"> 
      <img src="http://beerhold.it/100/100" /> 
    </div> 
    <div class="gds"> 
      <h2>@Model.Name</h2> 
      <p>@Model.Description</p> 
    </div> 
  </div> 
</section> 
<section class="textblock"> 
  <div class="wrap"> 
    <div class="pic"> 
      <img src="http://beerhold.it/100/100" /> 
    </div> 
    <div class="gds"> 
      <h2>@Model.Name</h2> 
      <p>@Model.Description</p> 
    </div> 
  </div> 
</section>

Answer 2

CSS не может менять местами элементы html-верстки. CSS может менять отображение этих элементов.

Тут простейший пример четных-нечетных элементов:

li {
color: black;
}
li:nth-child(odd) {
color: red;
}
li:nth-child(even) {
color: blue;
}

<ul>
<li>ho</li>
<li>ho</li>
<li>ho</li>
<li>ho</li>
<li>ho</li>
</ul>

http://jsfiddle.net/thirtydot/K3TuN/1323/

Answer 3

Немного улучшил ответ Andrey Fedorov, добавив justify-content: flex-end; Чтобы элементы были прибиты к одному краю.

.wrap { 
  display: flex; 
} 
 
.pic { 
  margin-right: 16px; 
} 
 
.textblock:nth-child(even) .wrap { 
  flex-direction: row-reverse; 
  justify-content: flex-end; 
} 
 
.textblock:nth-child(even) .wrap .pic { 
  margin-right: 0; 
  margin-left: 16px; 
}

<section class="textblock"> 
  <div class="wrap"> 
    <div class="pic"> 
      <img src="http://beerhold.it/100/100" /> 
    </div> 
    <div class="gds"> 
      <h2>@Model.Name</h2> 
      <p>@Model.Description</p> 
    </div> 
  </div> 
</section> 
<section class="textblock"> 
  <div class="wrap"> 
    <div class="pic"> 
      <img src="http://beerhold.it/100/100" /> 
    </div> 
    <div class="gds"> 
      <h2>@Model.Name</h2> 
      <p>@Model.Description</p> 
    </div> 
  </div> 
</section> 
<section class="textblock"> 
  <div class="wrap"> 
    <div class="pic"> 
      <img src="http://beerhold.it/100/100" /> 
    </div> 
    <div class="gds"> 
      <h2>@Model.Name</h2> 
      <p>@Model.Description</p> 
    </div> 
  </div> 
</section> 
<section class="textblock"> 
  <div class="wrap"> 
    <div class="pic"> 
      <img src="http://beerhold.it/100/100" /> 
    </div> 
    <div class="gds"> 
      <h2>@Model.Name</h2> 
      <p>@Model.Description</p> 
    </div> 
  </div> 
</section>