Wie lassen sich Elemente von unten nach oben fließen?

Question

Dec 17, 2013, 09:37 PM

Wie lassen sich Elemente von unten nach oben fließen?

Gibt es in CSS eine Möglichkeit, Elemente so zu gestalten, dass sie sich wie das Bild auf der rechten Seite verhalten? Die Reihenfolge der Elemente ist nicht so wichtig, aber die Kacheln müssen den Platz von unten nach oben und nicht von oben nach unten einnehmen, wenn die Größe der Seite geändert wird.

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

Beispielcode:

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