时间戳

首页 > 解决方案 > 换行符无法在 php 中按预期工作

php - 换行符无法在 php 中按预期工作

问题描述

我正在尝试创建一个由较小的红色和蓝色方块创建的正方形。问题是，当我想使用
一些奇怪的东西时，每条新线都会偏离 20 像素。

<style>
    .box{
        background-color: red;
        position: relative;
        width: 20px;
        height: 20px;
        margin-left: 3px;
        margin-top: 3px;
        float:left;
    }
    .box1{
        background-color: blue;
        position: relative;
        width: 20px;
        height: 20px;
        margin-left: 3px;
        margin-top: 3px;
        float:left;
    }
</style>

<?php
for($a=0;$a<4;$a++){
  for($i = 0; $i < 4; $i++)
    {
        echo "<div class= box> </div>";
        echo "<div class= box1> </div>";
    }
    echo "<br />";
    for($i = 0; $i < 4; $i++)
    {
        echo "<div class= box> </div>";
        echo "<div class= box1> </div>";
    }
    echo "<br />";
}
?>

它看起来如何

标签： phphtmlcss

解决方案

使用相对位置是问题所在。改为使用display:inline-block。您也可以仅使用 2 个 for 循环来完成此操作。

<style>
    .box{
        background-color: red;
        width: 20px;
        height: 20px;
        margin-left: 3px;
        margin-top: 3px;
        display: inline-block;
        
    }
    .box1{
        background-color: blue;
        width: 20px;
        height: 20px;
        margin-left: 3px;
        margin-top: 3px;
        display: inline-block;
    }
</style>

<?php
for($a=0;$a<8;$a++){
  for($i = 0; $i < 4; $i++)
    {
        echo "<div class= box> </div>";
        echo "<div class= box1> </div>";
    }
    echo "<br />";
}
?>

推荐阅读