div在瀏覽器的調整大小下降

我的問題在於，當我調整頁面的大小時，歡迎div落在profileImg div下面而不是調整大小。我知道這是非常基本的，但我需要一些幫助。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{}

來源

2012-12-23 Cool Guy Yo

兄弟你需要工作的浮動和寬度的歡迎div。這是花車的財產，因爲當他們沒有得到足夠的空間時，他們只是向下滑動。如果您向我展示您的工作網站，我可以解決問題。 – w3uiguru

我不能，它在wordpress中，我目前沒有辦法託管它。謝謝無論如何，我想我會堅持這個功能，它似乎工作正常。 –

如果您將前兩個部分放在一個固定寬度的容器中，則在調整屏幕大小時不會讓它們錯位。

如果您嘗試製作響應式佈局，則可以在CSS3中使用媒體查詢。看到下面的例子：

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

來源

2012-12-23 14:08:41 vlood

div在瀏覽器的調整大小下降

回答

相關問題