对行和列使用模[关闭]答案

【问题标题】：Using modulo for rows and columns [closed]对行和列使用模[关闭]
【发布时间】：2015-12-29 22:55:06
【问题描述】：

我知道这个问题已经被问了好几次了，但我就是无法正确回答。我发现的所有示例要么过于个人化和复杂，要么有些角度或 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; ?>

【问题讨论】：

“在一行中设置基本的 4 列”是什么意思？
您在$a 的每个循环上重置$i=0;。所以你在if($i++ % 4 == 0) 中的$i++ 永远不会增加。您应该在$a 上进行检查。同样使用$i 的目的是什么？
另外，您应该将<div class="row"> 移动到循环之前，因为目前您正在对$a 的每个循环进行一行，而不是仅仅在 4 之后。
你的 cmets 应该是 HTML cmets 而不是 PHP cmets。
这会为每列生成四行，而不是相反。

标签： php html css modulo

【解决方案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>

【讨论】：

不，这不会改变任何事情。每行有 1 列，但该行的每一行甚至没有任何列
@IvanTopić 现在试试。在 phpfiddle 上试试 :)

【解决方案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>

【讨论】：