html - div 在调整浏览器大小时下降

Question

我的问题在于，当我调整页面大小时，欢迎 div 低于 profileImg div，而不仅仅是调整大小。我知道这是非常基础的，但我需要一些帮助。

我有以下屏幕截图 标本A http://grab.by/iwam 标本 B http://grab.by/iwak

和下面的代码

wordpress 爵士乐

<div id="container">
    <section id="profileImg">
    </section>
    <section id="welcome">
    <?php
    // The Query
    query_posts( 'category_name=welcome' );

    // The Loop
    while ( have_posts() ) : the_post();
    ?>
    <h1><?php the_title();?></h1>
    <p><?php the_content();?></p>
    <?php
    endwhile;

    // Reset Query
    wp_reset_query();

    ?>
    </section>
    <section id="skills">
    <?php
    // The Query
    query_posts( 'category_name=skills' );

    // The Loop
    while ( have_posts() ) : the_post();
    ?>
    <h1><?php the_title();?></h1>
    <p><?php the_content();?></p>
    <?php
    endwhile;

    // Reset Query
    wp_reset_query();

    ?>
    </section>
    <section id="what">
    <?php
    // The Query
    query_posts( 'category_name=what i can do' );

    // The Loop
    while ( have_posts() ) : the_post();
    ?>
    <h1><?php the_title();?></h1>
    <p><?php the_content();?></p>
    <?php
    endwhile;

    // Reset Query
    wp_reset_query();

    ?>
    </section>  

CSS

html{font-size: 62.5%;}
#container{
    margin-left: 5%;
    margin-right:auto;
    overflow:scroll;
}
#profileImg{
    float:left;
    background:url(../images/austinProfile.jpg) no-repeat center center; width:352px; height:349px;
    background-size: 100%;
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    transition: 0.1s;
    opacity: 0.5;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
#profileImg:hover{
    opacity: 1.0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);

}
/*typography*/
#welcome h1{
    font-size: 4em;
}
#welcome p{
    font-size: 2.4em;
    line-height: 1.2em;
    font-weight: 700;
}
#skills h1, #what h1{

}
/*typography*/
#welcome{float:left; width:70%; clear:none;}
#skills{clear: both;}
#what{}

Answer 1

如果将前两个部分放在一个宽度固定的容器中，则在调整屏幕大小时不会错位。

如果您尝试制作响应式布局，可以使用 CSS3 中的媒体查询。请参见下面的示例:

@media screen and (max-width: 600px) {
  #profileImg {background-size: 50%;}
}