1

私の問題は、ページのサイズを変更すると、サイズを変更するだけでなく、ウェルカム div が profileImg div の下にあることに直面しています。これは非常に基本的なことですが、助けが必要です。

次のスクリーンショットがあります 標本A http://grab.by/iwam 標本B http://grab.by/iwak

そして次のコード

ワードプレスジャズ

<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{}
4

1 に答える 1

0

最初の 2 つのセクションを固定幅の 1 つのコンテナーに配置すると、画面のサイズを変更するときにそれらが誤って配置されることはありません。

レスポンシブ レイアウトを作成しようとしている場合は、CSS3 のメディア クエリを使用できます。以下の例を参照してください。

@media screen and (max-width: 600px) {
  #profileImg {background-size: 50%;}
}
于 2012-12-23T14:08:41.073 に答える