我的布局有问题。 当我在 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'],60,'utf-8');?> ...</p>
            </div>
            <div class="go-corner" href="{% url 'places:detail' i.id %}">
                <div class="go-arrow">
                    →
                </div>
            </div>
        </a>
        <?php
    }
?>

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