PHP 在 X 个 div 后结束 div 并在 X 个 div 后开始新的一个答案

【问题标题】：PHP end div after X amount of divs and start new one after X divsPHP 在 X 个 div 后结束 div 并在 X 个 div 后开始新的一个
【发布时间】：2013-12-11 20:24:52
【问题描述】：

我正在尝试使用 php 循环构建不对称网格。

我已经做到了：

<?php
$arr = array("blue", "yellow", "red", "pink", "green", "cyan", "gold", "orange", "magenta","blue", "yellow", "red", "pink", "green", "cyan", "gold", "orange", "magenta","blue", "yellow", "red", "pink", "green", "cyan", "gold", "orange", "magenta");

$i = 0;
foreach ($arr as $val) {

    if($i <= 4) {
        if($i%2 == 0) {
            if($i != 0) {
                echo "</div>";
            }
            echo '<div class="container" style="margin:20 10px;border:1px solid;">';
        }
    }
    if($i%7 == 0) {
        if($i != 0) {
            echo "</div>";
            echo '<div class="container" style="margin:20 10px;border:1px solid;">';
        }   
    }
    ?>
    <div class="holder" style="font-family:helvetica;font-weight:bold;padding:5px;background-color:<?php echo $val; ?>;">
        <?php echo $i." - ".$val;?>
    </div>
<?php
$i++;
}
?>
</div>

这就是我想做的：

<div class="container">
<div class="holder"> 0 - blue </div>
<div class="holder"> 1 - yellow </div>
</div>
<div class="container">
<div class="holder"> 2 - red </div>
<div class="holder"> 3 - pink </div>
</div>
<div class="container">
<div class="holder"> 4 - green </div>
<div class="holder"> 5 - cyan </div>
<div class="holder"> 6 - gold </div>
</div>
<div class="container">
<div class="holder"> 0 - blue </div>
<div class="holder"> 1 - yellow </div>
</div>
<div class="container">
<div class="holder"> 2 - red </div>
<div class="holder"> 3 - pink </div>
</div>
<div class="container">
<div class="holder"> 4 - green </div>
<div class="holder"> 5 - cyan </div>
<div class="holder"> 6 - gold </div>
</div>
<div class="container">
<div class="holder"> 0 - blue </div>
<div class="holder"> 1 - yellow </div>
</div>
<div class="container">
<div class="holder"> 2 - red </div>
<div class="holder"> 3 - pink </div>
</div>
<div class="container">
<div class="holder"> 4 - green </div>
<div class="holder"> 5 - cyan </div>
<div class="holder"> 6 - gold </div>
</div>

更新：http://phpfiddle.org/main/code/ke2-ku8 这是我现在的页面，上面的三个块是对的，我希望我的模板有这个结构。但是我无法为我用循环生成的每个 div 找到一种方法。

任何建议都会很棒！

谢谢

【问题讨论】：

你到底想做什么，你当前的代码在哪里失败了？
我建议你使用类和子选择器。看来您正试图根据输出的 div 更改 CSS。这将使您的代码更清晰，更易于管理。我建议你放弃使用 style 属性。
这是一个例子......当然我使用类
break 和 continue 将允许您控制 foreach 循环的流程。
谢谢，我已经更新了帖子

标签： php html css loops grid

【解决方案1】：

试试这个：

<?php // Fun testing array
$arr = array("blue", "yellow", "red", "pink", "green", "cyan", "gold", "orange", "magenta","blue", "yellow", "red", "pink", "green", "cyan", "gold", "orange", "magenta","blue", "yellow", "red", "pink", "green", "cyan", "gold", "orange", "magenta");

// Here's where we control the breaks
$breakpoints = array(0,2,4);
// Highest number of rows/items
$max_point = 7;

// Loop through all items
foreach ($arr as $i=>$val) {
    // Track breaks
    $calc = $i% $max_point;
    // Check for a breakpoint to make things happen
    if(in_array($calc,$breakpoints)) {
        // Is this a virgin?
        if ($i > 0) echo "</div>";
        // Output a new container
        echo '<div class="container" style="margin:20px 10px;border:1px solid;">'."\n\r";
    } ?>
    <div class="holder" style="font-family:helvetica;font-weight:bold;padding:5px;background-color:<?php echo $val; ?>;"><?php echo $i." - ".$val; $i++; ?></div>
<?php } ?>

【讨论】：