Как заставить элементы течь снизу вверх?

Есть ли способ в CSS, чтобы заставить элементы вести себя как картинка справа? Порядок элементов не так важен, но плитки должны занимать пространство снизу вверх, а не сверху вниз, так как человек изменяет размер страницы.

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

Пример кода:

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

Ответы

Ответ 1

Подумайте нестандартно:

.container, .tile {
    transform:rotate(180deg);         /* Moz and IE10+ */
    -ms-transform:rotate(180deg);     /* IE9 */
    -webkit-transform:rotate(180deg); /* Opera/Chrome/Safari */
}

Да, это действительно работает:

.container {
  margin:10px;
  border:1px solid black;
  float:left;
  transform:rotate(180deg);
}
.tile {
  width:100px;
  height:64px;
  border:1px solid black;
  margin:5px;
  float:right;
  font-size: 40px;
  text-align: center;
  line-height: 64px;
  vertical-align: middle; 
  transform:rotate(180deg);
}

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

Ответ 2

Есть еще один способ сделать это. Вы можете использовать свойство CSS3 flex-wrap для достижения нужного результата.

.container{
    display: flex;
    flex-wrap: wrap-reverse;
}

Пример

Обновление до 2015 года

flex-wrap поддерживается в Chrome, Firefox, Opera, IE 10+ и Safari 6.1 +.

Ответ 3

Лучшим решением, которое я могу придумать, используя только CSS, было бы использовать медиа-запросы на конкретных контрольных точках и разработать 2-4 (в зависимости от о том, сколько очков вы хотите, это может быть еще больше) желаемых конфигураций.

Подумайте о желаемых конфигурациях, затем вы можете указать конкретный идентификатор вашего контента для изменения их стилей/ширины на каждой точке останова. Например,

<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; 
    }
@media all and (max-width: 699px) and (min-width: 520px) {
  #tileOne {
    width: 100%;
  }
  #tileTwo {
    width: 50%;
  }
}
  </style>

</head>
<body>
    <div id="container-1" class="container">
      <span class="tile" id="tileOne">1</span>
      <span class="tile" id="tileTwo">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>

Этот метод будет полностью ручным, поэтому может не работать хорошо для динамического содержимого, если вы также не хотите использовать css-child-selectors, что для обратной совместимости лучше всего использовать с помощью jQuery. Но поскольку он полностью ручной, он также дает вам полный контроль над прогрессией.

Как и в случае с решением Niels, это не будет работать ниже IE9, потому что медиа-запрос не поддерживается.