首頁  >  問答  >  主體

以PHP編寫的程式碼實現元素的棋盤格模式展示

我這樣從php端顯示元素:

<?php foreach ($cases as $case) { ?>
    <div class="case">
        <div class="row">
            <div class="col-6">
                <img src="<?= $case->getImageUrl() ?>">
            </div>
            <div class="col-6">
                <div class="text"><?= $case->text ?></div>
            </div>
        </div>
    </div>
<?php } ?>

在html頁面上它們看起來像這樣

.case {
  padding: 50px;
}

img {
  width: 300px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="case">
    <div class="row">
        <div class="col-6">
            <img src="https://i.imgur.com/JMHHMVl.jpg">
        </div>
        <div class="col-6">
            <div class="text">case 1</div>
        </div>
    </div>
</div>

<div class="case">
    <div class="row">
        <div class="col-6">
            <img src="https://i.imgur.com/m3cq9ez.jpg">
        </div>
        <div class="col-6">
            <div class="text">case 2</div>
        </div>
    </div>
</div>

<div class="case">
    <div class="row">
        <div class="col-6">
            <img src="https://i.imgur.com/IKXSAiw.jpg">
        </div>
        <div class="col-6">
            <div class="text">case 3</div>
        </div>
    </div>
</div>

是否可以使col-6交替交換,使頁面上的元素以棋盤格的形式顯示,像這樣

.case {
  padding: 50px;
}

img {
  width: 300px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="case">
    <div class="row">
        <div class="col-6">
            <img src="https://i.imgur.com/JMHHMVl.jpg">
        </div>
        <div class="col-6">
            <div class="text">case 1</div>
        </div>
    </div>
</div>

<div class="case">
    <div class="row">
        <div class="col-6">
            <div class="text">case 2</div>
        </div>
        <div class="col-6">
            <img src="https://i.imgur.com/m3cq9ez.jpg">
        </div>
    </div>
</div>

<div class="case">
    <div class="row">
        <div class="col-6">
            <img src="https://i.imgur.com/IKXSAiw.jpg">
        </div>
        <div class="col-6">
            <div class="text">case 3</div>
        </div>
    </div>
</div>

P粉068486220P粉068486220422 天前559

全部回覆(1)我來回復

  • P粉204079743

    P粉2040797432023-09-15 09:10:35

    自從bootstrap切換到display: flex,就可以使用純現代CSS來實現這樣的效果:

    .case:nth-of-type(2n) .row{
        flex-direction: row-reverse;
    }

    不需要對HTML進行任何更改。

    回覆
    0
  • 取消回覆