The site implemented the issuance of goods from the database, where there is a picture, name and description. All in one block: the picture on the left side, and the name and description on the right side.

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

Here is the 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>

I would like to do the following: for example, there are 7 products in the database. It is necessary that each even change the position of the picture ( class="pic" ) and descriptions ( class="gds" ) i.e. so that on 2, 4 and 6 products the picture and description are reversed.

In CSS, there is a nth-child selector. Is it possible for them to realize their plans and how? Is it possible to somehow indicate that he changes the <div class = "pic"> and <div class="gds"> in this textblock ? If this does not work out, then how is it possible in principle to interchange the picture and description on even elements?

Thank you in advance for your reply!

    2 answers 2

    Add css, like mine:

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

      CSS cannot swap html layout elements. CSS can change the display of these elements.

      Here is the simplest example of even-odd elements:

       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/

      • You are wrong, maybe. See an example Andrey Fedorov - Crantisz
      • @Crantisz and what, in his answer, does the location of the html elements change? in my opinion, only their display changes. - Sasha Omelchenko
      • @SashaOmelchenko change in terms of layout. Does not change from the point of view of DOM - Crantisz
      • one
        If it was supported in all browsers ... caniuse.com/#search=flex-direction In IE10 and earlier, it is not supported, it won't work in other older browsers either. You can solve it simply through nth-child: for example, in the even element float the image to the left, and the description to the right, and in the odd one - vice versa. - labris
      • The @labris argument about insufficient browser support for flexbox is no longer accepted. IE9 at the level of firefox 25 or chromium 41 is distributed in Russia. The USI browser uses more than IE 9, although I am sure that the developers hardly check it at all. - Sasha Omelchenko