2013-04-02 82 views
1

我試圖從頁面頂部向下移動一個div,但它不工作。如何使div移動到頁面底部

這裏的div和它的CSS:

<div class="slides"> 
    <?php include 'slides.php'; ?> 
    </div> 

.slides { 
    width: 990px; 
    height: 390px; 
    margin-bottom: 15px; 
} 

我已經得到了代碼(一些吧,反正)在上jfiddle:

http://jsfiddle.net/jerU7/

你可以看到原來的頁面在這裏:

http://www.autotrafficinfo.com/

我需要將頂部的旋轉橫幅向下移動到頁腳正上方的底部。我把div(class =「幻燈片」)移動到了html的底部,但它仍然位於頂部。我意識到你可以讓div做一些不明顯的事情,但我不知道如何讓這一舉措向下。

在jfiddle的代碼中,您可以看到文本(「160萬的實時流量...」)位於頂部。實際上,旋轉圖像出現在底部(儘管所有三個都出現在那裏,而不是一次一個地旋轉,因爲Java腳本沒有連接)。文字和橫幅應該都在底部。

如何向下滑動div(class =「slides」),使其位於頁腳之上?

回答

1

您的代碼需要一點重組。

  1. 總結所有從#greenSmall#green在新.content的div的div。
  2. #green
  3. 卸下CSS屬性 float:left
  4. 移動.slides div來的.content DIV低於和高於footer DIV。
+0

這樣做!另一件事。我在#greenSmall中添加了一些頂部邊距(100px)以使其位於徽標下方,但最後還有一個問題。如何在4個廣告和#green之間獲得一些空間?我試着給#green添加一個頂部邊距,但它不會讓步。 – birdus

+0

擺弄一些。 class =「box」添加了一些底部邊距。再次感謝你的幫助。 – birdus

1

CSS:

.slides{ 
     top:97%; // Or designate the px location if you so desire 
     width: 990px; 
     height: 390px; 
     margin-bottom: 15px; 
    } 
+0

我不能讓這對jfiddle或本地工作。它似乎沒有做任何事情。 – birdus

1

上面的答案的代碼幾乎是正確的,但它錯過了一個元素。爲了使'頂部'和'底部'工作,元素必須絕對定位。所以,上面的代碼將成爲

.slides{ 
    position: absolute;  
    top:97%; // Or designate the px location if you so desire 
    width: 990px; 
    height: 390px; 
    margin-bottom: 15px; 

}