Clever Geek Handbook

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


source to share


3 answers


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

+2


source


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


source


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


source






More articles:


All Articles