Alternative div to have images on the left (even) or right (odd)

Question

Alternative div to have images on the left (even) or right (odd)

I am trying to improve the arrangement of images instead of 1 column images. See the example in the appendix, images for each article can be left and right.

enter image description here

This is my code. HTML:

<section class="content list_page">
    <article id="post-66">
        <div class="list_img"><img src="img1.png"></div>
        <div class="list_text">Content 1</div>
    </article>
    <article id="post-63">
        <div class="list_img"><img src="img2.png"></div>
        <div class="list_text">Content 2</div>
    </article>
    .
    .
    .
</section >

CSS

.list_page:nth-child(odd) .list_img{ 
    float:right; 
}
.list_page:nth-child(even) .list_img{
     float:left;
}

How should I do it? Please help. -Thanks in advance

+3

html css css3

Aasim hussain khan June 18. 15 at 7:23

source to share

3 answers

Your code will work if you select article

<style>

article:nth-child(odd) .list_img{ 
    float:right; 
}
article:nth-child(even) .list_img{
     float:left;
}
</style>

+2

Innervisions June 18. 15 at 7:29

source to share

Hi you are using bad selector for odd and even. No ".list_page", but the tag "article"

article:nth-child(odd) .list_img{ 
    float:right; 
}
article:nth-child(even) .list_img{
     float:left;
}

http://jsfiddle.net/mraranturnik/3u64jaew/

+2

Michał Szaniewski June 18. 15 at 7:31

source to share

Tharaka arachchige · Accepted Answer · 2015-06-18T07:28:07+0000

Try using this css

.list_page article:nth-child(odd) .list_img{ 
    float:right; 
}
.list_page article:nth-child(even) .list_img{
     float:left;
}

The problem is you are selecting the parent div and not the child article

Alternative div to have images on the left (even) or right (odd)

More articles: