Question

我正在创建一个包含4个不同部分的页面。在每个部分都有一个响应式图像，在图像上有文本和一些按钮。现在，它们偏离中心和右侧。我试图实现，以便第一个div文本和按钮向右浮动，第二个div文本和按钮向左浮动，依此类推。我使用偶数奇数nth属性，但它只响应于偶数css nth属性。这是CSS和HTML。请记住，我现在只使用背景颜色作为示例，如果我使用它，将放入浮动和填充。

    .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; ?>

每种/其他CSS技术

1 个答案: