Question

我正在创建我的第一个自定义WordPress主题，无法弄清楚为什么两个几乎相同的类别模板文件的显示方式不同。

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

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

<?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>

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

感谢。

Answer 1

问题在于http://bugsandbubs.com/category/adventures/中的页脚位于#page-container内，所以它只会像它的父级一样增长945像素。

如果您将<footer>元素移到<div id="page-container">之外，那么您应该很高兴。

Answer 2

添加此代替我的原始答案，因为您更改了问题。事实证明你错过了一个结束</div>。问题并没有出现在第一页上，因为你只有一个帖子，但我打赌如果你添加另一个，你会看到同样的事情。下面的代码段只关注你的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; ?>

Answer 3

页面几乎完全相同......但是在页面上样式不正确的情况下你会犯一些错误......

所有错误的是图片网址;

因为图像的实际尺寸与您在css上设置的图像不同...当网址被破坏/错误时，这会弄乱页面样式...

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

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

Answer 4

您可以使用验证程序检查问题，使用此处的{3}}中的w3schools验证工具

输入您的网址，它会显示找到的错误。

您可以在输入网址的位置选择一个框以显示源代码。这样您就可以快速查看陷入困境的区域。

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

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

4 个答案: