在博客文章后出现的侧边栏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%; 
} 

Answer 2

你的文章面积为100％宽。所以没有侧边栏的空间。尝试调整宽度和边距以使总数达到100.类似于以下代码。

#content { 
    width: 70%; 
    float: left; 
    margin-left: 3%; 
} 
#sidebar { 
    width: 22%; 
    float: right; 
    margin-right: 3%; 
} 

您在Blog页面上的图片不会随浏览器宽度而调整。以较小的屏幕尺寸查看它。要使其可调整并以较小的分辨率移除水平滚动条，请使用以下CSS代码。

#content .alignleft, 
#content img.alignleft { 
    max-width: 100%; 
} 

Answer 3

它看起来像你可能一直在努力，当我看看它。当时我可以在您的#content ID中将width: 100%;更改为width: 720px;，并且它似乎可以使边栏垂直对齐顶部，与您的内容区域并排排列。

我也注意到你有多个同名的ID，特别是#content。如果你还有其他问题，可能需要清理css，以便更清楚地查看它。当我追逐一个问题的时候，总会碰到我，我的CSS变得失去控制，并且我失去了我为改正问题所做的改变。