使用PHP创建三列布局

我正在尝试使用PHP/HTML/CSS创建三列布局.左列包含图像,然后是该图像下方的文本,每个图像和文本都在一个单独的行上.右列与左列相同,但具有不同的图像和文本.中间列包含彼此相邻的图像和文本,因此一行中有一个图像和一个文本,下一行中有一个图像和一个文本,依此类推.我有一个容器div,它将容纳这些列,容器占页面的85%.所以每列大约是28%.现在,我只关注左右列.为简单起见,这些列只有图像而不是文本(我的输出图像).当我运行代码时,输​​出是每个图像彼此相邻,而不是每个图像在浮动到它们各自位置的单独行上.

PHP/HTML

 query("SELECT * FROM table");

        if ($resultSet->num_rows != 0)
        {
           while ($rows = $resultSet->fetch_assoc())
           {
            $id = $rows["id"];
            $images = $rows["image"];
            $text = $rows["text"];

            echo "
";
            if ($id > 3 && $id < 8)
            {
                echo "
";
                echo "";
                echo "
$text
";
                echo "
";  
            }

            if ($id > 8)
            {
                echo "
";
                echo "";
                echo "
$text
";
                echo "
";  
            }
            echo "
";  
           }
        }
 ?>

CSS

#container{
    position: relative;
    margin: 0 auto;
    width: 85%;
    height: auto;
}

#left{
    float: left;
    width: 28.33%;  
}

#left img{
    width: 100%;
}

#right{
    float: right;
    width: 28.33%;
}

#right img{
    width: 100%;
}

这是输出的样子:

数据集:

4

5

6

7
9
10

它创建了图像的内联,而不是将它们放在单独的行上.我该如何纠正这个问题？

由于您正在寻找网格布局,您会发现诸如Bootstrap之类的框架非常有用.使用Bootstrap,您的HTML将如下所示:

  
Left
  
Middle
  
Right

如果由于某种原因你不想使用库(为什么不呢？)那么看看他们的CSS.

将您的类创建为变量,然后创建HTML:

$class = 'middle';
if( something_here ){
  $class = 'left';
}
echo "
Content
";

您的数据库变量可能包含导致HTML错误的字符.为防止这种情况,请创建一个简单的函数

function html($str){
  return htmlspecialchars($str, ENT_QUOTES);
}

然后使用:

如果您希望图像是块,只需使用block图像上调用的类,然后创建此CSS:

.block{
  display:block;
}

代替:

$this = $row['this'];
$that = $row['that'];
echo "
$this
";
echo "
$that
";

你实际上可以在PHP和HTML之间跳转:

现在,您的代码更短,更易于编辑,更易于阅读,包括源代码.