Jak sprawić, by elementy przepływały od dołu do góry?

Question

Dec 17, 2013, 09:37 PM

Jak sprawić, by elementy przepływały od dołu do góry?

Czy w CSS jest sposób, aby elementy zachowywały się tak jak na obrazku po prawej? Kolejność elementów nie jest tak ważna, ale płytki muszą zajmować miejsce od dołu do góry, a nie od góry do dołu, gdy osoba zmienia rozmiar strony.

  NORMAL         DESIRED
|---------|    |---------|
| A B C D |    | I       |
| E F G H |    | E F G H |
| I       |    | A B C D |
|---------|    |---------|

Przykładowy kod:

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