对行和列使用模数

Question

我知道这个问题已经被问过好几次了，但我就是答不对。我发现的所有示例要么过于个人化和复杂，要么有些 angular 或 javascript。我正在尝试学习如何在一行中设置 4 列。

 // start basic loop just to have some data
 <?php for($a=1; $a<=20; $a++) : ?>

    // set counter
    <?php $i=0; ?>

    <div class="row">

        <div class="col-md-3" style="border: 1px solid black">
            <?php echo $i; ?>
        </div>

        <?php if($i++ % 4 == 0) : ?>
        </div><div class="row">
    <?php endif; ?>

// close row
</div>

<?php endfor; ?>

Answer 1

您的 PHP 脚本有点过时，请尝试以下操作

<div class="row">
    <?php
// start basic loop just to have some data
for($a=0; $a<=20; $a++) {
    ?>
    <div class="col-md-3" style="border: 1px solid black">
        <?php echo $a; ?>
    </div>
    <?php
    if($a % 4 == 3) {
    ?>
</div>
<div class="row">
    <?php
    }
}
    ?>
</div>

Answer 2

如果您创建一个用于生成行的循环，另一个用于生成这些行中的单元格，事情会变得更容易，如下所示：

<?php   // start basic loop for generating rows
        for($row=0; $row<5; $row++) {
?>          <div class="row">
<?php       // start basic loop for cells within a row
            for($cell=0; $cell<4; $cell++) {
?>              <div class="col-md-3" style="border: 1px solid black">
                    <?=$row*4+$cell?>
                </div>
<?php       }
?>          </div>
<?php   }
?>

我假设您有 col-md-3 的样式，使那些 div 元素保持在一行中，如下所示：

<style>
    .col-md-3 { display: table-cell; width: 100px }
</style>

对行和列使用模数

Using modulo for rows and columns

php

html

css

modulo