Question

我正在尝试使用div和PHP创建一个检查板。

与此相似： enter image description here

到目前为止，我想要一个像这样的div：

<div class="black"></div>
<div class="white"></div>

然后使用for循环输出指定宽度框中的每个框。

有什么想法吗？

Answer 1

使用for loop。 for循环允许您重复指定次数的某组操作。通过嵌套两个for循环，您可以创建8行，每行包含8列。

接下来，你想要交替使用黑白盒子，所以我把所有偶数盒子都做成了黑色，其余的就是白色。

for($row=1;$row<=8;$row++){
    for($col=1;$col<=8;$col++){
        if($row%2 === 0){
            if($col%2 === 0){
                echo "<div class='white'></div>";
            } else {
                echo "<div class='black'></div<";
            }
        } else {
            if($col%2 === 0){
                echo "<div class='black'></div>";
            } else {
                echo "<div class='white'></div>";
            }
        }
    }
}

当然您需要适当地设置black和white类（display:inline-block）。

熟悉上述内容后，您可以编写更整洁的版本：

for($row=1;$row<=8;$row++){
    for($col=1;$col<=8;$col++){
        if(($col%2 === 0 && $row%2 === 0) || ($col%2 !== 0 && $row%2 !== 0)){
            echo "<div class='white'></div>";
        } else {
            echo "<div class='black'></div>";
        }
    }
}

输出：

output

基于OP提供的完整代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>PHP</title>
        <style>
        body{
            font-weight: bold;
            font-size: 18px;
        }

        *{
            margin: 0;
            padding: 0;

        }
        .wrapper{
            width: 400px;
            margin: 20px auto;
            padding: 0;
            border: 1px solid #000;
        }

        .black{
            margin: 0;
            padding: 0;
            width: 50px;
            height: 50px;
            background: #000;
            display: inline-block;
            vertical-align: top;
        }

        .white{
            margin: 0;
            padding: 0;
            width: 50px;
            height: 50px;
            background: #fff;
            display: inline-block;
            vertical-align: top;
        }
        </style>
    </head>
    <body>
    <div class="wrapper">
        <?php
            for($row=1;$row<=8;$row++){
                for($col=1;$col<=8;$col++){
                    if(($col%2 === 0 && $row%2 === 0) || ($col%2 !== 0 && $row%2 !== 0)){
                        echo "<div class='white'></div>";
                    } else {
                        echo "<div class='black'></div>";
                    }
                }
            }

        ?>
    </div>



    </body>
</html>

Answer 2

你走了，另一种方法，但很容易理解

$divs = ['<div class="black"></div>', '<div class="white"></div>'];

foreach(range(0,7) as $i)
{
    foreach(range(0,7) as $j)
    {
        if($i%2==0)
        {
            if($j%2==0)
            {
                echo $divs[0];
            }
            else
            {
                echo $divs[1];
            }
        }
        else
        {
            if($j%2==0)
            {
                echo $divs[1];
            }
            else
            {
                echo $divs[0];
            }
        }

    }
}

Answer 3

你可能正在寻找这样的东西。在此示例中，您没有额外的if语句：

<div class="board">
    <?php
        for($row=0;$row<8;$row++){
            for($column=0;$column<8;$column++){
                $color = ($row+$column)%2 ? 'black' : 'white';
                echo '<div class="'.$color.'">&nbsp;</div>';
            }
        }
    ?>
</div>

我还添加了一些CSS，以便很好地打印瓷砖：

.white, .black {
    width: 30px;
    height: 30px;
    display: block;
    float: left;
}
.white {
    background: #FFFFFF;
}
.black {
    background: #000000;
}
.board {
    width: 240px;
    height: 240px;
    border: 1px solid black;
}

Answer 4

只使用:nth-child选择器的纯CSS，这是可行的。

5 x 5网格

.board {
  border: 1px solid black;
  width: 400px;
  height: 400px;
}

.board div {
  width: 80px;
  height: 80px;
  float: left;
}
.board div:nth-child(odd) {
  background: black;
}

<div class="board">
  <div></div><div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div><div></div>
</div>

如果你想要它们更小，那么只需更改宽度和高度元素并添加或删除div即可。

使用Div和PHP的Checkboard？

4 个答案:

5 x 5网格