im trying to find the best way to loop a list of news, the only issue is regarding the format of the news, basically im using boostrap, and in each row i have different size formats, the rows format columns are basically these sequence:
<row>col-6 col-3 col-3 col-3</row>
<row>col-4 col-4 col-4 col-4</row>
<row>col-6 col-3 col-3 col-3</row>
<row>col-4 col-4 col-4 col-4</row>
...
And goes on same sequence.
I can figure out how to loop in these sequence, does anybody have same issue?
Above i leave my html code example.
<div class="row latest-news">
<div class="col-md-6">
<a href="" rel="bookmark" title="">
<div class="relative">
<img src="/images/7.jpg" style="width:100%;" class="" alt="" />
<div class="feat-wide5-text">
<span class="feat-cat">Liga</span>
<h2>Lorem ipsum dolor sit amet</h2>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="" rel="bookmark" title="">
<div class="relative">
<img src="/images/7.jpg" style="width:100%;" class="" alt="" />
<div class="">
<div class="archive-list-text left relative">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores ipsam eos qui ratione.</p>
</div>
<!--archive-list-text-->
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="" rel="bookmark" title="">
<div class="relative">
<img src="/images/7.jpg" style="width:100%;" class="" alt="" />
<!--feat-info-wrap-->
<div class="">
<div class="archive-list-text left relative">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni ipsam dolores eos qui ratione.</p>
</div>
<!--archive-list-text-->
</div>
</div>
</a>
</div>
</div>
<div class="row latest-news">
<div class="col-md-4">
<a href="" rel="bookmark" title="">
<div class="relative">
<div class="archive-list-img">
<img src="/images/7.jpg" style="width:100%;" alt="" /> </div>
<!--feat-info-wrap-->
<div class="">
<div class="archive-list-text left relative">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni ipsam dolores eos qui ratione.</p>
</div>
<!--archive-list-text-->
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="" rel="bookmark" title="">
<div class="relative">
<div class="archive-list-img">
<img src="/images/2.jpg" style="width:100%;" alt="" /> </div>
<!--feat-info-wrap-->
<div class="">
<div class="archive-list-text left relative">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni ipsam dolores eos qui ratione.</p>
</div>
<!--archive-list-text-->
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="" rel="bookmark" title="">
<div class="relative">
<div class="archive-list-img">
<img src="/images/3.jpg" style="width:100%;" alt="" /> </div>
<!--feat-info-wrap-->
<div class="">
<div class="archive-list-text left relative">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni ipsam dolores eos qui ratione.</p>
</div>
<!--archive-list-text-->
</div>
</div>
</a>
</div>
</div>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire