Но проблема в том, что первые две новости в больших блоках, а остальные в маленьких.
В div-е есть основной класс и дополнительный block_news__elements_1, ...2, ...3
Как сделать чтобы при выводе статей каждой присваивался класс block_news__elements_$n?
На flexbox это так у меня получилось.
CODE (html):
скопировать код в буфер обмена
скопировать код в буфер обмена
- <div class="block_news">
- <div class="container">
- <div class="block_news__row">
- <div class="block_news__elements block_news__elements_1">
- <div class="block_news__content">
- <picture>
- <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
- <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
- <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
- <img src="images/5190IMG_02_12_2017_615-410.jpg">
- </picture>
- <div class="block_news__title">
- Далеко-далеко за словесными горами в стране.
- </div>
- </div>
- </div>
- <div class="block_news__elements block_news__elements_2">
- <div class="block_news__content">
- <picture>
- <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
- <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
- <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
- <img src="images/5190IMG_02_12_2017_615-410.jpg">
- </picture>
- <div class="block_news__title">
- Lorem ipsum dolor sit amet.
- </div>
- </div>
- </div>
- <div class="block_news__elements block_news__elements_3">
- <div class="block_news__content">
- <picture>
- <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
- <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
- <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
- <img src="images/5190IMG_02_12_2017_615-410.jpg">
- </picture>
- <div class="block_news__title">
- Lorem ipsum dolor sit amet, consectetur adipisicing.
- </div>
- </div>
- </div>
- <div class="block_news__elements block_news__elements_4">
- <div class="block_news__content">
- <picture>
- <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
- <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
- <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
- <img src="images/5190IMG_02_12_2017_615-410.jpg">
- </picture>
- <div class="block_news__title">
- Lorem ipsum dolor sit amet, consectetur.
- </div>
- </div>
- </div>
- <div class="block_news__elements block_news__elements_5">
- <div class="block_news__content">
- <picture>
- <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
- <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
- <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
- <img src="images/5190IMG_02_12_2017_615-410.jpg">
- </picture>
- <div class="block_news__title">
- Lorem ipsum dolor sit amet, consectetur.
- </div>
- </div>
- </div>
- <div class="block_news__elements block_news__elements_6">
- <div class="block_news__content">
- <picture>
- <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
- <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
- <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
- <img src="images/5190IMG_02_12_2017_615-410.jpg">
- </picture>
- <div class="block_news__title">
- Lorem ipsum dolor sit amet, consectetur.
- </div>
- </div>
- </div>
- <div class="block_news__elements block_news__elements_7">
- <div class="block_news__content">
- <picture>
- <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
- <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
- <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
- <img src="images/5190IMG_02_12_2017_615-410.jpg">
- </picture>
- <div class="block_news__title">
- Lorem ipsum dolor sit amet, consectetur.
- </div>
- </div>
- </div>
- <div class="block_news__elements block_news__elements_8">
- <div class="block_news__content">
- <picture>
- <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
- <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
- <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
- <img src="images/5190IMG_02_12_2017_615-410.jpg">
- </picture>
- <div class="block_news__title">
- Lorem ipsum dolor sit amet, consectetur.
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>