为什么添加 php 代码后，我的布局变坏了？答案

【问题标题】：Why after adding php code, my layout is gone bad?为什么添加 php 代码后，我的布局变坏了？
【发布时间】：2021-10-01 04:36:00
【问题描述】：

我的布局有问题。当我在 html 上添加 php 代码时，一些 HTML 标记开始移动。我想创建一张包含信息的卡片。它有标题（某种图像）和正文（标题 - 类别 - 文本）。当我在没有 php 的情况下尝试它时，只是使用随机文本，一切都很好。但是，添加php代码后，我的header和body分开了。

没有php的html代码：

<a class="card_article" href="#">
    <div class="card_header">
        <img src="img/avatar2.png" alt="">
    </div>
    <div class="card_body">
        <p class="bid_link">Название статьи</p>
        <p>Категория: Программирование</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when...</p>
    </div>
    <div class="go-corner" href="{% url 'places:detail' i.id %}">
        <div class="go-arrow">
            →
        </div>
    </div>
</a>

带有php代码的html：

<?php 
    $articles = mysqli_query($connection, "SELECT * FROM `articles` WHERE `categories_id` = 3   ORDER BY `id` DESC LIMIT 10");
?>
<?php 
    while ( $art = mysqli_fetch_assoc($articles) )
    {
        ?>
        <a class="card_article" href="#">
            <div class="card_header">
                <img src="style/images/<?php echo $art['image']; ?>" alt="">
            </div>
            <div class="card_body">
                <a class="bid_link" href="/article.php?id=<?php echo $art['id']?>"><?php echo $art['title']; ?></a>
                <?php
                    $categories = mysqli_query($connection, "SELECT * FROM `articles_categories`");
                ?>
                <?php 
                    $cat = mysqli_fetch_assoc($categories)
                ?>
                <?php
                    $art_cat = false;
                    foreach( $categories as $cat )
                    {
                        if( $cat['id'] == $art['categories_id'] )
                        {
                            $art_cat = $cat;
                            break;
                        }
                    } 
                ?>
                <p class="under">Категория: <a href="/categotie.php?id=<?php echo $art_cat['id']; ?>"><?php echo $art_cat['title']?></a></p>
                <p class="under"><?php echo mb_substr($art['text'], 0, 60, 'utf-8');?> ...</p>
            </div>
            <div class="go-corner" href="{% url 'places:detail' i.id %}">
                <div class="go-arrow">
                    →
                </div>
            </div>
        </a>
        <?php
    }
?>

另外，我在 google 查看代码中注意到，我的 html 代码（我自己编写的）与 google 代码查看中的代码不匹配。

【问题讨论】：

感谢您的合作，但没有帮助。
我添加了新的描述，请注意。我将感谢您的任何帮助。

标签： php html css templates layout

【解决方案1】：

您可以开始使您的代码更简单，即删除多余的 php 括号。

这是完全相同的代码的一个更轻量级的版本

<?php 
    $articles = mysqli_query($connection, "SELECT * FROM `articles` WHERE `categories_id` = 3   ORDER BY `id` DESC LIMIT 10");
    while ( $art = mysqli_fetch_assoc($articles) )
    {
        ?>
        <a class="card_article" href="#">
            <div class="card_header">
                <img src="style/images/<?php echo $art['image']; ?>" alt="">
            </div>
            <div class="card_body">
                <a class="bid_link" href="/article.php?id=<?php echo $art['id'] . "\">" . $art['title'] . "</a>";
                    $categories = mysqli_query($connection, "SELECT * FROM `articles_categories`");
                    $cat = mysqli_fetch_assoc($categories);
                    $art_cat = false;
                    foreach( $categories as $cat )
                    {
                        if( $cat['id'] == $art['categories_id'] )
                        {
                            $art_cat = $cat;
                            break;
                        }
                    } 
                ?>
                <p class="under">Категория: <a href="/categotie.php?id=<?php echo $art_cat['id'] . "\">" . $art_cat['title'] . "</a></p>"; ?>
                <p class="under"><?php echo mb_substr($art['text'], 0, 60, 'utf-8');?> ...</p>
            </div>
            <div class="go-corner" href="{% url 'places:detail' i.id %}">
                <div class="go-arrow">
                    →
                </div>
            </div>
        </a>
        <?php
    }
?>

那么，严格来说，您的手动代码和生成的代码是不一样的。您的代码中有多个链接，这些链接在您的手动示例中不存在，即<p class="bid_link">Название статьи</p> 成为您代码中的锚。

您应该删除所有锚点并生成与手动编写的代码完全相同的代码，然后逐步添加锚点，直到找到罪魁祸首。

您生成的代码中可能有一些东西会改变 CSS。

【讨论】：