备用div使图像左(偶)或右(奇) [英] Alternate div to have images left(even) or right(odd)

问题描述

我正在尝试将图像排列得更好，而不只是1列中的图像.参见附件中的示例，每篇文章的图像都可以在左侧和右侧.

I am trying have a better arrangement of images instead of just images in 1 column. See example in attachment, the images for each article can be on left and right.

这是我的代码.HTML:

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 do I do that? Please help. -Thanks in advance

推荐答案

尝试使用此CSS

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

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

Problem is you selecting the parent div not the child article

这篇关于备用div使图像左(偶)或右(奇)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！