php - 每个/其他 CSS 技术

Question

我正在创建一个包含 4 个不同部分的页面。每个部分都有一个响应图像，图像上有文本和一些按钮。现在它们有点偏离中心并向右对齐。我正在努力实现，以便第一个 div 文本和按钮向右浮动，第二个 div 文本和按钮向左浮动等等。我正在使用 even odd nth 属性，但它只响应 even css nth 属性。这是CSS和html。请记住，我现在只是使用背景颜色作为示例，如果我让它工作，我会放入 float 和填充。

    .popup-open:nth-child(odd) {
   background: #ff0000;
    }

    .popup-open:nth-child(even) {
    background: #000000;
    }

    <div class="popup-open">
            <div class="icons-large">

                                <?php 

                                $fields = CFS()->get('icons_large');

                                if($fields) :
                                    foreach ($fields as $field) : ?>
                                    <div class="row">
                                            <div class="image">
                                                <img src="<?php echo $field['icons_big'];?>" alt="">
                                            </div>
                                    </div>

                                <?php endforeach; endif; ?>

                            </div>
            <div class="icons-large">

                                <?php 

                                $fields = CFS()->get('tour_titles');

                                if($fields) :
                                    foreach ($fields as $field) : ?>

                                                <?php echo $field['tour_name'];?>

                                <?php endforeach; endif; ?>

                            </div>
            <div class="title"><?php the_title(); ?></div>
            </div>

Answer 1

我认为您应该向 div 添加一个类并以这种方式定位它们，您也将对其进行更多控制。

    if($fields) :
$i = 1;
  foreach ($fields as $field) :

if($i === 2){
 $class = "even";
 $i = 1;
}else if($i === 1){
    $class = "odd";
 $i = 2;
}
<div class="row <?=$class;?>">
<div class="image">
<img src="<?php echo $field['icons_big'];?>" alt="">

</div>
</div>
<?php endforeach; endif; ?>