谷歌没有正确配对我的“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 和 for 每个语句之间的 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>