php - 博客文章后出现的侧边栏 DIV

Question

我查看了这个并发现了许多类似的问题 - 尝试了故障排除但无法解决，我终究无法弄清楚为什么 div 会下降到博客文章下方，将所有内容都推出去.侧边栏应位于博客文章旁边，即 3/4 帖子，1/4 侧边栏。相反，侧边栏被推到帖子下方。无论图像/文本等如何，所有帖子都会发生这种情况......所以这不是我收集的图像或文本问题。 http://pastestudios.com/buying-property-sydney/

<div id="pageHead">
    <?php $blog_page_id = of_get_option('ttrust_blog_page'); ?>
    <?php $blog_page = get_page($blog_page_id); ?>
    <h1><?php echo $blog_page->post_title; ?></h1>
    <?php $page_description = get_post_meta($blog_page_id, "_ttrust_page_description_value", true); ?>
    <?php if ($page_description) : ?>
        <p><?php echo $page_description; ?></p>
    <?php endif; ?>
</div>

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

    <div <?php post_class(); ?>>                                                    
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" ><?php the_title(); ?></a></h1>
        <div class="meta clearfix">
            <?php $post_show_author = of_get_option('ttrust_post_show_author'); ?>
            <?php $post_show_date = of_get_option('ttrust_post_show_date'); ?>
            <?php $post_show_category = of_get_option('ttrust_post_show_category'); ?>
            <?php $post_show_comments = of_get_option('ttrust_post_show_comments'); ?>

            <?php if($post_show_author || $post_show_date || $post_show_category){ _e('Posted ', 'themetrust'); } ?>                    
            <?php if($post_show_author) { _e('by ', 'themetrust'); the_author_posts_link(); }?>
            <?php if($post_show_date) { _e('on', 'themetrust'); ?> <?php the_time( 'M j, Y' ); } ?>
            <?php if($post_show_category) { _e('in', 'themetrust'); ?> <?php the_category(', '); } ?>
            <?php if(($post_show_author || $post_show_date || $post_show_category) && $post_show_comments){ echo " | "; } ?>

            <?php if($post_show_comments) : ?>
                <a href="<?php comments_link(); ?>"><?php comments_number(__('No Comments', 'themetrust'), __('One Comment', 'themetrust'), __('% Comments', 'themetrust')); ?></a>
            <?php endif; ?>
        </div>

        <?php if(of_get_option('ttrust_post_show_featured_image')) : ?>
            <?php if(has_post_thumbnail()) : ?>
                <?php if(of_get_option('ttrust_post_featured_img_size')=="large") : ?>                                          
                    <?php the_post_thumbnail('ttrust_post_thumb_big', array('class' => 'postThumb', 'alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?>              
                <?php else: ?>
                    <?php the_post_thumbnail('ttrust_post_thumb_small', array('class' => 'postThumb alignleft', 'alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?>
                <?php endif; ?>
            <?php endif; ?>
        <?php endif; ?>

        <?php the_content(); ?>

        <?php wp_link_pages( array( 'before' => '<div class="pagination clearfix">Pages: ', 'after' => '</div>' ) ); ?>

    </div>              
    <?php comments_template('', true); ?>

    <?php endwhile; ?>                          
</div>

<?php get_sidebar(); ?>                 

Answer 1

首先，设置box-sizing: border-box

接下来，使 #content 和 #sidebar 等于 100% 宽度。现在，您将 #content 设置为 100%，并将 #sidebar 设置为像素，因此，自然地，它会将侧边栏向下推。

尝试这样的事情:

* { box-sizing: border-box; }
#content {
  width: 65%;
}
#sidebar {
  width: 35%;
}