Como fazer os elementos fluírem de baixo para cima?
Existe uma maneira no CSS para obter elementos para se comportar como a imagem à direita? A ordem dos elementos não é tão importante, mas os blocos precisam ocupar o espaço de baixo para cima, em vez de de cima para baixo, conforme a pessoa redimensiona a página.
NORMAL DESIRED
|---------| |---------|
| A B C D | | I |
| E F G H | | E F G H |
| I | | A B C D |
|---------| |---------|
Código de amostra:
<html>
<head>
<style>
.container {
margin:10px;
border:1px solid black;
float:left;
}
.tile {
width:100px;
height:100px;
border:1px solid black;
margin:5px;
float:left;
font-size: 50px;
text-align: center;
line-height: 100px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="container-1" class="container">
<span class="tile">1</span>
<span class="tile">2</span>
<span class="tile">3</span>
<span class="tile">4</span>
<span class="tile">5</span>
<span class="tile">6</span>
<span class="tile">7</span>
<span class="tile">8</span>
<span class="tile">9</span>
</div>
</body>
</html>