html - 交替 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;
}

我该怎么做？请帮忙。-提前致谢

Answer 1

尝试使用这个 css

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

问题是您选择了父 div 而不是子文章