Question

在尝试使我的侧边栏动态时，发生了一些事情导致我的整个侧边栏从博客容器的右侧推到所有帖子内容的下方。我之前没有遇到过这个问题 - 我通常可以毫无问题地做到这一点 - 所以我不确定该寻找什么。有什么想法吗？

HTML / PHP

<?php get_header( 'blog');?>

    <div id="blog-container">       
        <div id="blog">
            <?php if (have_posts()) : ?>
            <?php while (have_posts()) : the_post(); ?>
            <div class="post-title">
                <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            </div><!-- end post-title -->
            <div class="post">
                <?php the_content('read more..'); ?>
            <div class="post-meta">
                <p><?php the_date(); ?> | <?php the_tags('tags:', ', ', ''); ?> | <?php comments_number( '0', '1 comment', '% comments' ); ?></p>
                <?php comments_template(); ?>
            </div><!-- end post-meta -->
                <?php endwhile; ?>
                <?php else : ?>
                    Nothing found.
                <?php endif;?>
            </div><!-- end post -->
        </div><!-- end blog -->
        <?php get_sidebar(); ?>
        <?php get_footer(); ?>
    </div><!-- end blog-container -->

CSS

#sidebar {
    float: right;
    margin-top: 80px;
    padding-right: 10px;
    position: relative;
    width: 300px;
}

.blog-social {
    clear: both;
    padding-bottom: 20px;
    text-align: center;
}

.blog-social ul li {
    display: inline;
    padding-right: 10px;
}

.blog-social ul li:last-child {
    padding-right: 0px;
}

#sidebar .social-heading {
    text-align: center;
}

#sidebar #twitter-feed {
    font-family: podkova;
    font-size: 80%;
    color: #333333;
    letter-spacing: 1px;
    line-height: 1.5;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 280px;
}

#sidebar #twitter-feed ul li {
    padding-bottom: 10px;
}

#sidebar #instagram-feed {
    padding-top: 20px;
    padding-bottom: 20px;
}

Answer 1

看起来元素缺少结束标记，因此您的侧边栏正在#blog div内呈现。尝试将</div>移到<?php endwhile; ?>上方。

侧栏显示在帖子内容下面而不是旁边（Wordpress）

1 个答案: