为什么这些几乎相同的页面的样式不同？答案

【问题标题】：Why is the styling of these nearly identical pages different?为什么这些几乎相同的页面的样式不同？
【发布时间】：2013-07-24 18:47:05
【问题描述】：

我正在创建我的第一个自定义 WordPress 主题，但不知道为什么两个几乎相同的类别模板文件显示不同。

this page 底部的黑色带应该延伸到整个页面宽度，就像在 this page 上一样，但由于某种原因它不是。

样式正确的模板文件代码如下：

<?php get_header(); ?>

<body class="projects">

<div id="page-container">

    <?php get_sidebar(); ?>

    <div id="content">
        <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>

        <div <?php post_class(); ?>>

            <div class="post-container">

                <div class="post-title">
                    <span class="date"><?php the_time('F j, Y'); ?></span><h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><h3>
                </div>

                <div class="post-content">
                    <?php the_content(''); ?>       
                </div>

                <div class="post-footer">
                    <p>BY:</p><div class="post-footer-item"><?php the_author_posts_link(); ?></div><p>CATEGORY:</p><div class="post-footer-item"><?php the_category(', '); ?></div><div class="post-footer-action"><a href="<?php the_permalink(); ?>"><p><?php comments_number('0','1','%'); ?></p><img id="comments" src="<?php bloginfo('template_directory'); ?>/images/comments.png" height=20px></a></div><div class="post-footer-action"><a href="#"><p>44</p><img id="likes" src="<?php bloginfo('template_directory'); ?>/images/likes.png" height=20px></a></div>
                </div>

            </div>  

        <?php endwhile; ?>

            <div id="more-posts">
                <a href="<?php next_posts_link(''); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/more.png" width=200></a>
            </div>

        </div>

        <?php endif; ?>

    </div>

</div>

样式错误的模板代码如下：

<?php get_header(); ?>

<body class="adventures">

<div id="page-container">

    <?php get_sidebar(); ?>

    <div id="content">
        <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>

        <div <?php post_class(); ?>>

            <div class="post-container">

                <div class="post-title">
                    <span class="date"><?php the_time('F j, Y'); ?></span><h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                </div>

                <div class="post-content">
                    <?php the_content(''); ?>       
                </div>

                <div class="post-footer">
                    <p>BY:</p><div class="post-footer-item"><?php the_author_posts_link(); ?></div><p>CATEGORY:</p><div class="post-footer-item"><?php the_category(', '); ?></div><div class="post-footer-action"><a href="<?php the_permalink(); ?>"><p><?php comments_number('0','1','%'); ?></p><img id="comments" src="<?php bloginfo('template_directory'); ?>/images/comments.png" height=20px></a></div><div class="post-footer-action"><a href="#"><p>44</p><img id="likes" src="<?php bloginfo('template_directory'); ?>/images/likes.png" height=20px></a></div>
                </div>

            </div>  

        <?php endwhile; ?>

            <div id="more-posts">
                <a href="<?php next_posts_link(''); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/more.png" width=200></a>
            </div>

        </div>

        <?php endif; ?>         

    </div>

</div>

两个类别模板文件的结构相同（据我所知）并使用相同的样式表，所以我不知道为什么它们在浏览器中显示不同。

谢谢。

【问题讨论】：

meta.stackexchange.com/q/125997/217863

标签： html css wordpress wordpress-theming

【解决方案1】：

添加这个来代替我原来的答案，因为你改变了问题。原来你错过了一个结束</div>。问题不会出现在第一页，因为您只有一个帖子，但我敢打赌，如果您添加另一个帖子，您会看到相同的内容。下面的 sn-p 只关注您的 while 循环，如果您在我通过评论指出的位置添加结束 </div>，应该可以解决您的问题。

    <?php while (have_posts()) : the_post(); ?>
            <div <?php post_class(); ?>>  <!-- *** you open this but never close it *** -->
                <div class="post-container">
                    <div class="post-title">
                        <span class="date"><?php the_time('F j, Y'); ?></span><h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                    </div>
                    <div class="post-content">
                        <?php the_content(''); ?>       
                    </div>
                    <div class="post-footer">
                        <p>BY:</p><div class="post-footer-item"><?php the_author_posts_link(); ?></div><p>CATEGORY:</p><div class="post-footer-item"><?php the_category(', '); ?></div><div class="post-footer-action"><a href="<?php the_permalink(); ?>"><p><?php comments_number('0','1','%'); ?></p><img id="comments" src="<?php bloginfo('template_directory'); ?>/images/comments.png" height=20px></a></div><div class="post-footer-action"><a href="#"><p>44</p><img id="likes" src="<?php bloginfo('template_directory'); ?>/images/likes.png" height=20px></a></div>
                    </div>
                </div>  
            </div> <!-- *** need to add a closing div here - I've added it for you *** -->
    <?php endwhile; ?>

【讨论】：

我不认为它缺少任何 </div> 结束标签，我认为将 <footer> 粘贴到错误的位置只是一个诚实的错误。
真的，我把答案改成了“可能是”，因为它可能是。有可能你是对的，但它只是在错误的地方。
确实如此，我想我看起来足够近了，只是发现这只是 <footer> 元素被粘贴一个关闭 </div> 太快的情况。
我添加了一个额外的关闭
来解决样式问题，但是当我使用 W3 代码验证器时，它说我有一个额外的关闭
并引用了我所在的代码行刚刚添加了结束

。想法？

【解决方案2】：

问题是您在http://bugsandbubs.com/category/adventures/ 中的页脚在您的#page-container 内，因此它只会像父级一样增长 945px。

如果您将 <footer> 元素移到 <div id="page-container"> 之外，您应该可以开始了。

【讨论】：

【解决方案3】：

页面几乎相同...但是在样式不正确的页面上您有一些错误...

你错了只是图片的 URL；

因为图像的实际大小与您在 css 上设置的大小不同...当 url 损坏/错误时，这会打乱页面样式...

我建议修复链接并在第 151 行添加您的 style.css 文件：

#social img {
    width: 145px;
    height: 30px;  /* ADD THIS */
   }

【讨论】：

【解决方案4】：

您可以使用验证器检查问题，使用此处的 w3schools 验证器工具http://validator.w3.org/

输入您的网址，它会向您显示发现的错误。

您可以在输入 URL 的下方选择一个框以显示源代码。这将允许您快速查看您的问题区域。

我希望这会有所帮助，祝你好运！

【讨论】：