Question

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

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

和以下代码

wordpress jazz

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

div降低了浏览器的大小

1 个答案: