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%;
}

“博客”页面上的图片无法根据浏览器宽度进行调整。以较小的屏幕尺寸查看。要使其可调整并以较小的分辨率移除水平滚动条，请使用以下CSS代码。

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

Answer 3

在我查看它的时候，你可能一直在研究它。当时我可以在您的width: 100%; ID中将width: 720px;更改为#content，这似乎可以让侧边栏与您的内容区域垂直对齐到顶部。 / p>

我还注意到你有多个同名的ID，特别是#content。可能想要清理css，这样如果你有任何问题，你可以更清楚地看一下它。当我追逐一个问题时，我总是发生在我身上，我的css失去控制，我忘记了我为尝试纠正问题所做的改变。

补充工具栏DIV出现在博文后

3 个答案: