边栏区域未正确浮动

时间:2016-01-13 10:58:59

标签: css wordpress

我试图通过一些努力让侧边栏在Wordpress框架中正确显示,但我几乎是他们的,但侧边栏需要出现在最右边标题旁边的博客文本右侧

您可以在http://kvalixhu.digitalthinkersni.co.uk/blog/

查看相关网页

我希望它如何显示的图像

https://nimbus.everhelper.me/client/notes/share/369625/9zqAVkxFA4iFRBTqA1E5mw20uuWOqgs8/

<?php
/**
* Template Name: BlogPosts
*/
         get_header();


        ?>
<style>

#title_wrapper{
width:488px;
}

h2{
    font-size:18px;
    font-familly:verdana, arial, sans-serif;
    line-height:16px;
    display:inline;
    padding:2px;

}
#dateinfo{
    font-weight:bold;


}
</style>
        <div id="main-content" class="main-content">

        <?php
        if (is_front_page()) {
            get_template_part('featured-content');
        }
        ?>

        <div class="full-width page-header">
            <div class="row">
                <div class="column">
                    <h1>Blog</h1>
                </div>
            </div>
        </div>
        <div class="row  show-for-medium-up">
            <div class="column breadcrumb">
                <?php
        if (function_exists('yoast_breadcrumb')) {
            //echo __('Home',TD) . ' > ';            
            yoast_breadcrumb('<span id="breadcrumbs">', '</span>');
        }
        ?>
           <?php
        if (function_exists('bcn_display_list_multidim_children')) {
        ?><ul class="breadcrumbs">
                <?php
            bcn_display_list_multidim_children();
        ?>
               </ul><?php
        }
        ?>
           </div>
        </div> 

        <div class="row">


                    <div class="column small-12 product">    
                               <?php
        $logo = get_post_meta(get_the_ID(), 'logo', true);
        ?>

                      <div class="post-list" style="width:80%;">
            <?php
        $myposts = get_posts('numberposts=-1&offset=$debut');
        foreach ($myposts as $post):
            setup_postdata($post);
        ?>
             <div id="dateInfo" style="float:right;">
<?php the_date('Y.m.j'); ?>&nbsp;|&nbsp;
<?php comments_number( '0 hozzászólás', '1 hozzászólás', '% hozzászólás' ); ?>.
</div>


             <div id="title_wrapper">
    <h2><?php the_title(); ?></h2>

</div>


                  <div class="thumbnail" style="float: left; margin: 10px">  
                    <?php the_post_thumbnail( array( 395, 195 ) ); ?>
                    <div class="thumbnail-arrow"></div>
                </div>

            <!-- Display movie review contents -->
            <div class="entry-content"><?php the_content(); ?></div>
        <div>

            <?php


        endforeach;
        ?>

            <div class="column small-6 product " style="float:right;">
        <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Right Sidebar')) : ?>
[ do default stuff if no widgets ]
<?php endif; ?>

</div>
        <hr />


        </div>

        </div> </div>
        </div>


        <?php

        get_footer();
        ?> 

1 个答案:

答案 0 :(得分:0)

你要做的第一件事是将“侧边栏div”移到post-list div之外,并添加“float:left;”到后列表div。 另外,在侧边栏div中添加宽度“width:20%;”确保它适合。

答案有点模糊,但希望你理解。

希望这会有所帮助