【问题标题】：Creating a three column layout with PHP使用 PHP 创建三列布局
【发布时间】：2016-03-30 10:45:34
【问题描述】：

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

PHP/HTML

 <?php
        $resultSet = $db->query("SELECT * FROM table");

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

            echo "<div id=container>";
            if ($id > 3 && $id < 8)
            {
                echo "<div id=left>";
                echo "<img src=$images>";
                echo "<p>$text</p>";
                echo "</div>";  
            }

            if ($id > 8)
            {
                echo "<div id=right>";
                echo "<img src=$images>";
                echo "<p>$text</p>";
                echo "</div>";  
            }
            echo "</div>";  
           }
        }
 ?>

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%;
}

这是输出的样子：

数据集：

<div id=container></div><div id=container></div><div id=container></div><div id=container><div id=left><img src=http://www.clker.com/cliparts/R/r/2/q/P/4/blue-number-one-hi.png><br><p>4</p></div></div><div id=container><div id=left><img src=http://bsccongress.com/im3/blue-number-two-clip-art.png><br><p>5</p></div></div><div id=container><div id=left><img src=http://www.clker.com/cliparts/L/H/T/b/g/N/three-md.png><br><p>6</p></div></div><div id=container><div id=left><img src=http://2.bp.blogspot.com/-x0uSxqUaYQA/UCEr1WV_1AI/AAAAAAAAC_0/QHrtbsfcK1s/s1600/blue-number-four-md.png><br><p>7</p></div></div><div id=container></div><div id=container><div id=right><img src=http://bsccongress.com/im7/blue-number-five-clip-art.png><p>9</p></div></div><div id=container><div id=right><img src=http://www.clipartbest.com/cliparts/Rid/gq7/Ridgq7AnT.png><p>10</p></div></div>

它正在创建图像的内联，而不是将它们放在单独的行上。我该如何解决这个问题？

【问题讨论】：

您能发布您的 PHP 脚本生成的 HTML 吗？您还可以将 $id 添加到
标记中，以便我们可以从数据库中看到 id，因为 CSS 依赖于它吗？
添加换行符 (?)
@JosephEvans 我刚刚在问题中添加了该数据集
@Fred-ii- 我尝试添加换行符，但它不影响任何内容，结果仍然相同。有什么办法可以代替我的方式吗？
一个ID只能被使用一次。您应该为重复的元素使用类。

标签： php jquery html css

【解决方案1】：

网格布局

由于您正在寻找网格布局，您会发现Bootstrap 之类的框架非常有用。使用 Bootstrap，您的 HTML 将非常简单：

<div class="row">
  <div class="col-xs-4">Left</div>
  <div class="col-xs-4">Middle</div>
  <div class="col-xs-4">Right</div>
</div>

如果您出于某种原因不想使用库（为什么不呢？），请查看他们的 CSS。

不要重复自己

将您的类创建为变量，然后创建 HTML：

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

转换特殊字符

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

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

然后使用：

<?php echo html($row['field_name']); ?>

您的图片问题

如果您希望您的图像是块，只需在您的图像上使用一个名为 block 的类，然后创建这个 CSS：

.block{
  display:block;
}

PHP 模板

代替：

$this = $row['this'];
$that = $row['that'];
echo "<p>$this</p>";
echo "<div>$that</div>";

您实际上可以在 PHP 和 HTML 之间跳转：

<?php if( something_here ){ ?>
<p><?=html($row['this'])?></p>
<div><?=html($row['that'])?></div>
<?php } ?>

现在您的代码更短、更易于编辑、更易于阅读，包括您的源代码。

【讨论】：