¿Cómo hacer que los elementos fluyan de abajo hacia arriba?

Question

Dec 17, 2013, 09:37 PM

¿Cómo hacer que los elementos fluyan de abajo hacia arriba?

¿Hay alguna forma en CSS para que los elementos se comporten como la imagen de la derecha? El orden de los elementos no es tan importante, pero los mosaicos deben ocupar el espacio de abajo hacia arriba en lugar de arriba hacia abajo a medida que la persona cambia el tamaño de la 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 muestra:

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