html - 我的侧边栏 float 在底部

Question

在我为 youtube 视频制作的自定义模板文件中，我的侧边栏出现问题，它在底部显示侧边栏，下面是我正在使用的代码..

任何人都可以帮助我，它应该保持在右边，因为它..

<?php
/**

 Template Name: gallery

*/


get_header(); 
?>
<style>
/* some basic styling */

h1 {font-size:20px; line-height:95%;}

#galvidcontainer {
  width:1100px;
  margin-left:50px;
  height:1250px;
}

.galvidpre {
  width:300px;
  height:300px;
  float:left;
  margin:5px;
  background-color:#00A0DA;
}

.galvidprevid {
  width:300px;
}

.galvidpretext {
  width:280px;
  padding-top:2px;
  margin-top:2px;
}

</style>

<div id="galvidcontainer">
<h1>Videos</h1>

     <?php /* Loop the stuff from the videos post type */
          $args = array( 'post_type' => 'videos', 'posts_per_page' => 10 );
          $loop = new WP_Query( $args );
          while ( $loop->have_posts() ) : $loop->the_post();?>
          <div class="galvidpre">
               <div class="galvidprevid">
               <?php
               /* Set variables and create if stament */
                $videosite = get_post_meta($post->ID, 'Video Site', single);
                $videoid = get_post_meta($post->ID, "Video ID", single);
                if ($videosite == vimeo) {  
                echo '<iframe src="http://player.vimeo.com/video/'.$videoid.'" width="300" height="190" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
                } else if ($videosite == youtube) {
                echo '<iframe width="300" height="190" src="http://www.youtube.com/embed/'.$videoid.'" frameborder="0" allowfullscreen></iframe>';
                } else {
                echo 'Please Select Video Site Via the CMS';
                }
                ?>
               </div>
               <div class="galvidpretext">
                    <h1><?php the_title() ?></h1>
                    <p>
                    <?php /* this is just a limit on characters displayed */
                    $words = explode(" ",strip_tags(get_the_content()));
                    $content = implode(" ",array_splice($words,0,20));
                    echo $content; ?>
                    </p>
               </div>

</div>

     <?php endwhile;?>

</div>
<?php get_sidebar() ?> 
<?php get_footer() ?>

侧边栏发生的事情>> http://i.imgur.com/wm82twJ.png

Answer 1

看来您必须清除 float 。使用 clearfix或清除:两者

<div id="container" class="clearfix"></div>


.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}