css-float - n番目の子の奇数/偶数のWordPressループ

Question

奇数行番号と偶数行番号でそれぞれ画像を右と左に浮かせたい標準のWordpressループがあります。

私が抱えている問題は、.featured:nth-child(odd) がすべての注目の画像に適用され、すべての画像が左に浮いていることです。

ループの問題でしょうか。代わりに foreach ループを使用する必要がありますか? どんな助けでも大歓迎です。ありがとう

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

   <figure class="featured">
    <img src="#" width="230" height="230">
   </figure>

   <div class="content">
        <?php the_content(); ?>
   </div>

<?php endwhile; ?>
<?php endif; ?>


CSS:
.featured {
margin: 0 0 0 20px;
width: 228px;
border: 1px solid #333; 
}
.featured:nth-child(odd){
float: left;

}

.featured:nth-child(even) {
float: right;

}

Answer 1

問題は、 figure.featured div.content が構造の 1 つのレベルにあることです。そして、すべての図形は nth-child(odd) のように認識しています。この状況では、div.content は「nth-child(even)」要素です。