在PHP中使用div标签动态创建网格布局

时间:2018-07-02 12:58:25

标签: php html bootstrap-4

因此,我有一个与此one类似的问题,但我仅在原始PHP中而不是在wordpress中应用它。经过无数小时的奋斗,我终于找到了答案,但是如果我增加网格号的大小,这些项目将无法对齐。

我希望它看起来像这样:

-----------
- 1 2 3 4 -
-----------

但是: 如我的问题所述,如果我尝试增加网格(或更确切地说是项目),它将变成这样:

-----------
- 1 2 3 4 -
-   5     -
-6        -
-7        -
-----------

变得混乱。下面是我要尝试的代码。

<div class="container">
<?php
$i=0;
$item=0;
$html_tag = '<div class = "row"><div class="col 3">';

while($item <= 4)
{
?>
    <?php if($i % 4 == 0) {
        $html_tag .= 'col '.$i.'</div>';
    }
    else {
        $html_tag .= '<div class="col"> col '.$i.'</div>';
    }
    ?>
<?php
    $i++;
    $item++;
}
$html_tag .= '</div>';
?>

<?php echo $html_tag ?>

P.S。我正在使用twitter bootstrap 4来提高响应速度。

编辑:

注意下面的屏幕截图,我刚刚意识到div行中有一个额外的文本“ col?3”,而不是另一个div列(未创建)。

enter image description here

2 个答案:

答案 0 :(得分:2)

您应该检查代码,最终结构不正确。

这就是你所得到的

<div class="container">
    <div class="row">
        <div class="col 3">col 0</div>
        <div class="col"> col 1</div>
        <div class="col"> col 2</div>
        <div class="col"> col 3</div>
        col 4
    </div>
</div>

尝试使用此代码

$html = '';
$totalItemPerLine = 3;
$totalItem = 7;
for($i = 0; $i < $totalItem; $i++)
{
    if($i % $totalItemPerLine == 0)
    {
        $html .= '<div class="row">'; // OPEN ROW
    }

    $html .= '<div class="col"> col '.$i.'</div>';

    if($i % $totalItemPerLine == ($totalItemPerLine-1))
    {
        $html .= '</div>'; // CLOSE ROW
    }
}

echo $html;

注意:您可以使用while进行完全相同的操作,但是出于可读性考虑,我使用了for

编辑:

根据您的评论@DavidDiaz,这是直接使用HTML编写的代码 但是我建议您学习POO并使用课程来完成此页面

$html = '';
$totalItemPerLine = 3;
$totalItem = 7;
for($i = 0; $i < $totalItem; $i++)
{
    if($i % $totalItemPerLine == 0)
    {?>
        <div class="row"> <!-- OPEN ROW -->
    <?php } ?>

    <div class="col"> col <?= $i ?> </div>

    <?php if($i % $totalItemPerLine == ($totalItemPerLine-1))
    { ?>
        </div> <!-- CLOSE ROW -->
    <?php }
} ?>

答案 1 :(得分:0)

接受的答案有误。它不会关闭最后一行。它需要另一个条件。

$html = '';
$totalItemPerLine = 3;
$totalItem = 7;
for($i = 0; $i < $totalItem; $i++)
{
    if($i % $totalItemPerLine == 0)
    {
        $html .= '<div class="row">'; // OPEN ROW
    }

    $html .= '<div class="col"> col '.$i.'</div>';

    if($i % $totalItemPerLine == ($totalItemPerLine-1) || $i == ($totalItems-1))
    {
        $html .= '</div>'; // CLOSE ROW
    }
}

echo $html;