備用div有圖像左（偶）或右（奇數）

Question

我想圖像更好的安排，而不是1列中的圖像。 請參閱附件中的示例，每篇文章的圖像可以在左側和右側。

這是我的代碼。 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; 
} 

我該怎麼辦呢？請幫忙。 -Thanks提前

Answer 1

嘗試使用這個CSS

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

問題是你選擇父DIV不是孩子的文章

Answer 2

，如果你選擇的文章

<style> 

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

Answer 3

你的代碼將工作

嗨，你用奇數和偶數使用不好的選擇器。否 「.list_page」，而是 「文章」 標籤

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

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