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 列，您的代码将无法在 totalBoxes mote 上运行而不是 9(它将产生更多列)。

我建议你使用以下逻辑:

<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>';
?>