如何將div浮動到頁面底部？

Question

就像這個問題所說的，我不能將任何東西都浮在水底......我嘗試了float：absolute，它表明了這一點。應該有5個不同的盒子，但它只顯示其中一個。這是我的代碼：

html, 
 
body { 
 
    height: 100%; 
 
} 
 
#one,#two,#three,#four,#five { 
 
    margin:0; 
 
    padding:0; 
 
    float:left; 
 
    display:inline-block; 
 
    height:50%; 
 
    width:20%; 
 
    bottom:0; 
 
    right:0; 
 
    left:0; 
 
    position:absolute; 
 
} 
 
div { 
 
    margin:-2px; 
 
    padding:-2px; 
 
} 
 
#container { 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
#one { 
 
    background-color: blue; 
 
} 
 
#two { 
 
    background-color: green; 
 
} 
 
#three { 
 
    background-color: yellow; 
 
} 
 
#four { 
 
    background-color: orange; 
 
} 
 
#five { 
 
    background-color: red; 
 
}

<div id="one"> 
 

 
</div> 
 

 
<div id="two"> 
 

 
</div> 
 

 
<div id="three"> 
 

 
</div> 
 

 
<div id="four"> 
 
</div> 
 

 
<div id="five">

感謝提前:)

Answer 1

您的代碼不具有絕對的工作，因爲你已經基本上將所有5盒堆疊在彼此頂部對於所有5個盒子，定位0餘量和左設置爲0，因此所有東西在屏幕的左下角都有相同的位置。如果您刪除的權利：0，並添加一個單獨的左屬性每個箱子，你應該能夠有一排整齊的所有5盒的底部，像這樣：

html, 
body { 
    height: 100%; 
} 
#one,#two,#three,#four,#five { 
    margin:0; 
    padding:0; 
    float:left; 
    display:inline-block; 
    height:50%; 
    width:20%; 
    bottom:0; 
    left:0; 
    position:absolute; 
} 
#container { 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 
#one { 
    background-color: blue; 
    left:0; 
} 
#two { 
    background-color: green; 
    left:20%; 
} 
#three { 
    background-color: yellow; 
    left:40%; 
} 
#four { 
    background-color: orange; 
    left:60%; 
} 
#five { 
    background-color: red; 
    left:80%; 
} 

的jsfiddle：https://jsfiddle.net/hq2hv1pw/

另外在旁註中，我會將選擇器與具有5個ID的CSS樣式的類組合起來。 希望這可以幫助你