网格布局

Question

我正在尝试使用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>

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

Answer 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 } ?>

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

使用PHP创建三列布局

1 个答案:

网格布局

不要重复自己

转换特殊字符

您的图片问题

PHP模板