在博客文章後出現的側邊欄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變得失去控制，並且我失去了我爲改正問題所做的改變。