1

我试图改变我拥有的一些行的布局。它们应该如下所示：

在此处输入图像描述

它在引导程序中，并且有一个循环输出每一行。输出如下所示：

<div class="container benefit-container">
    <div class="row benefit-row">

        <div class="col-md-6 benefit-text">
            <h4>...</h4>
            <p>...</p>
            <a href="#">...</a>          
        </div>

        <div class="col-md-6 benefit-image">
            <img src="#" />
        </div>

    </div>

    <div class="row benefit-row">

        <div class="col-md-6 benefit-text">
            <h4>...</h4>
            <p>...</p>
            <a href="#">...</a>          
        </div>

        <div class="col-md-6 benefit-image">
            <img src="#" />
        </div>

    </div>

    <div class="row benefit-row">

        <div class="col-md-6 benefit-text">
            <h4>...</h4>
            <p>...</p>
            <a href="#">...</a>          
        </div>

        <div class="col-md-6 benefit-image">
            <img src="#" />
        </div>

    </div>
</div>

因此，对于每个 .benefit-row，我都在尝试交换 .benefit-text 和 benefit-image。

我可以设法使用以下方法交换它们：

.benefit-row div:first-child {
  left: 50%;
}
.benefit-row div:last-child {
  right: 50%;
}

但是要交替行，我想我需要使用第 n 个子元素奇数和偶数 CSS。

但我不确定如何实现它。它几乎需要是一个 if 语句，例如，如果行是奇数，则第一个孩子 50% 和最后一个孩子 50%...

这甚至可以单独使用 CSS 完成吗？也许我需要编写我的 css 内联并以某种方式使用 php？

任何帮助将非常感激。感谢您的关注！

4

1 回答 1

1

odd就像我在上面的评论中所说的那样，最好使用CSS 伪选择器单独使用 CSS 来完成这个任务：

.benefit-row:nth-child(odd) div:first-child {
    left: 50%;
}
.benefit-row:nth-child(odd) div:last-child {
    right: 50%;
}

样品小提琴

这会产生这样的结果：

而不是使用 PHP 并添加一些奇偶和三元

<style type="text/css">
.benefit-row.alt div:first-child {
  left: 50%;
}
.benefit-row.alt div:last-child {
  right: 50%;
}
</style>
<?php $k = 1; ?>
<div class="container">
    <div class="row benefit-row <?php echo ($k++ & 1) ? 'alt' : '' ?>">
        <div class="col-6 bg-primary">1</div>
        <div class="col-6 bg-secondary">2</div>
    </div>
    <div class="row benefit-row <?php echo ($k++ & 1) ? 'alt' : '' ?>">
        <div class="col-6 bg-primary">1</div>
        <div class="col-6 bg-secondary">2</div>
    </div>
    <div class="row benefit-row <?php echo ($k++ & 1) ? 'alt' : '' ?>">
        <div class="col-6 bg-primary">1</div>
        <div class="col-6 bg-secondary">2</div>
    </div>
</div>

基本上产生相同的结果：

但是使用更丑陋的代码。所以使用正确的工具来完成这项工作。

于 2020-07-15T02:29:21.403 回答