php - 使用 CSS 和 PHP 创建 DIV 网格的逻辑错误

Question

我无法弄清楚使用 DIV 创建网格的逻辑。3 列（$count变量），然后用任意数量的框填充这些列。( $totalBoxes )

下面是我想要完成的一个例子。

我曾尝试在表的重复区域上使用逻辑，但我不知道这是否正确。我的大部分代码都会吐出类似这样的屏幕截图：

有人能指出我的逻辑哪里错了吗？

CSS

<style type="text/css">
#container {
background-color: #FFC;
height: 750px;
width: 900px;
padding: 5px;
}
#container #column {
background-color: #FC6;
width: 200px;
padding: 5px;
float: left;
margin: 5px;
}
#container #column #box {
background-color: #9C3;
height: 150px;
width: 150px;
margin: 5px;
}
</style>

PHP

<div id="container">
  <?php 
$count = 3;
$totalBoxes = 8;
?>
  <?php for ($i = 1; $i <= $totalBoxes; $i++) {

if ($i % $count == 1){ ?>
<div id="column"> Column <?php echo $i; ?>
<?php } else { ?>
<div id="box"> <?php echo $i; ?> </div>
</div>
<?php } } ?>
</div>

Answer 1

您在 else 线程中有错误，因为其中有两个关闭的 div。你也不能重复id

我不明白你想要 3 列还是 3 行？如果您想要 3 列，那么您的代码将无法在totalBoxes9 上运行（它将产生更多列）。

我建议您使用以下逻辑：

<style>
    .column {float: left; padding: 10px; width: 100px; border: solid thin red; background-color: green; margin-right: 5px}
    .box {width: 100%; height: 100px; background-color: white; margin-bottom: 5px; }
</style>
<?php
$boxes_in_column = ceil($totalBoxes / 3);
echo('<div class="column">Column 1');
for ($i = 1; $i <= $totalBoxes; $i++) {
    echo('<div class="box">'.$i.'</div>');
    if (($i % $boxes_in_column) === 0){
        echo('</div><div class="column">Column '.(ceil($i / $boxes_in_column)+1));
    }
}
echo('</div>');
?>

如果您将总框除以 3 而没有余数，它将产生额外的空列。所以尝试自己修复它。

水平填充

<style>
  .box1 {display: inline-block; width: 100px; height: 100px; background-color: white; margin: 5px; }
  .parent {background-color: blue; border: solid thin red; width: 330px}
</style>

<?php
$totalBoxes = 13;

echo '<div class="parent">';
for ($i = 1; $i <= $totalBoxes; $i++) {
    echo('<div class="box1">'.$i.'</div>');
}
echo '</div>';
?>