谷歌没有正确配对我的'div'标签（提前结束）

Question

我正在为自定义WordPress主题编写页面，我使用PHP和高级自定义字段为页面创建动态内容。我所有的div标签都有一个开始和结束但是谷歌似乎早期通过与错误的结束标签合作来结束div标签，这使得我的内容看起来很奇怪。有谁知道它为什么这样做以及如何解决它？

我已经尝试匹配我的所有标签，但我找不到一个没有正确结束的标签，所以我不知道它可能是什么。

这是我的代码。我试图尽可能地减少它，但所有这些都需要看到Div配对：

<div class="smaller-width center top">

    <div id="project-nav" class="title-section">
        <h1>Work.</h1>
        <nav id="project-filters">
        <button onClick="filterProj('All')" class="news-filter" ><p>All</p></button>
        <?php foreach($allCategories as $category) {
                        echo '<button onClick="filterProj('."'". $category->name ."'".')" class="news-filter" ><p>' .  $category->name . '</p></button>';
                } ?>

        </nav>
    </div>
    <div class="projcont full center">
        <div class="news-inner">

        <div class="clr"></div>

            <div id="projects-section">
                <?php               
                    foreach ($postslist as $post) :  setup_postdata($post); ?> 

                <?php if (has_post_thumbnail( $post->ID ) ):
                     $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); 
                ?>

                    <div class="project-post" data-categories="<?php 
                        foreach(wp_get_post_terms($post->ID, 'Project_Category', array("fields" => "all")) as $category) {
                            echo $category->name . ',';
                        } ?>">
                        <a class="single-project" href="<?php the_permalink() ?>">                        
                            <div class="project-inside" style="background-image: url( <?php echo $image[0]; ?>);"> 
                            </div>
                            <p>
                                <?php the_title(); ?><br>
                                <span id="tag">
                                    <?php foreach(wp_get_post_terms($post->ID, 'Project_Category', array("fields" => "all")) as $category) {
                                        echo $category->name . ' ';
                                    } ?>
                                </span>
                                <i class="fas fa-angle-right project-arrow"></i>
                            </p>  
                        </a>

                <?php endif; ?>               

                    </div>
                <?php endforeach; ?>
            </div>     
        </div>
        <div id="load"> 
            <button href="#" id="loadMore">VIEW MORE</button>
        </div>
    </div> 
</div>

这里有什么东西可以解决它可能会破坏它吗？

编辑：这是谷歌早期结束我的div的截图... 正如你所看到的，最后2个project-post id应该在project section里面

Answer 1

格式化是你的朋友。我已经在VS Code中格式化了您的代码，我可以更清楚地看到您的问题是什么。你的结尾if和每个语句之间的div是在错误的地方。我相信这是导致你的问题的原因。

<div class="smaller-width center top">
    <div id="project-nav" class="title-section">
        <h1>Work.</h1>
        <nav id="project-filters">
            <button onClick="filterProj('All')" class="news-filter" ><p>All</p></button>
            <?php foreach ($allCategories as $category) {
                echo '<button onClick="filterProj('."'". $category->name ."'".')" class="news-filter" ><p>' .  $category->name . '</p></button>';
            } ?>
        </nav>
    </div>
    <div class="projcont full center">
        <div class="news-inner">
            <div class="clr"></div>
                <div id="projects-section">
                    <?php foreach ($postslist as $post) :  setup_postdata($post); ?> 
                        <?php if (has_post_thumbnail($post->ID)):
                            $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'single-post-thumbnail');
                        ?>
                            <div class="project-post" 
                                data-categories="
                                    <?php
                                        foreach (wp_get_post_terms($post->ID, 'Project_Category', array("fields" => "all")) as $category) {
                                            echo $category->name . ',';
                                        } ?>">
                                <a class="single-project" href="<?php the_permalink() ?>">                        
                                    <div class="project-inside" style="background-image: url( <?php echo $image[0]; ?>);"></div>
                                    <p>
                                        <?php the_title(); ?><br>
                                        <span id="tag">
                                            <?php foreach (wp_get_post_terms($post->ID, 'Project_Category', array("fields" => "all")) as $category) {
                                            echo $category->name . ' ';
                                        } ?>
                                        </span>
                                        <i class="fas fa-angle-right project-arrow"></i>
                                    </p>  
                                </a>
                            </div>
                        <?php endif; ?>     
                    <?php endforeach; ?>          
                </div>
            </div>     
        </div>
        <div id="load"> 
            <button href="#" id="loadMore">VIEW MORE</button>
        </div>
    </div> 
</div>