Wie fließe ich divs an den unteren Rand einer Seite?

Question

Wie die Frage sagt, kann ich nichts auf den Grund schweben ... Ich versuchte float: absolut und es zeigte, dass. Es sollen 5 verschiedene Boxen sein, aber nur eine davon. Dies ist mein Code:

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">

Vielen Dank im Voraus :)

Answer 1

Ihr Code nicht funktioniert, weil Sie im Wesentlichen alle fünf Boxen gesetzt hat auf aufeinander zu stapeln, indem absolut mit Positionierung, 0 Rand und links für alle 5 Boxen auf 0 gesetzt, so dass alles die gleiche Positionierung in der unteren linken Ecke des Bildschirms hat. Wenn Sie mit der rechten entfernen: 0 und eine individuelle linke Eigenschaft für jedes Feld hinzufügen, sollten Sie alle 5-Boxen in einer ordentlichen Reihe am Boden zu haben, in der Lage, etwa so:

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/

Außerdem würde ich den Selektor mit einer Klasse für den CSS-Stil kombinieren, der 5 IDs hat, haha. Hoffe, das hilft dir aus