Автоматические строки и столбцы с CSS

Question

У меня ~ 170 маленьких квадратных элементов в div, я бы хотел, чтобы они располагались в столько строк, сколько им нужно для ширины div (которая будет изменяться в зависимости от ширины браузера).

<div id="container">
  <div class="sq"></div>
  <div class="sq"></div>
  <div class="sq"></div>
</div>

Я знаю, что могу сделать:

#container .sq { float:right; }

с некоторыми отступами, чтобы заставить их собираться справа и медленно перетекать вниз - что-то вроде этого:

. . . . . . .
. . . . . . .
. . . . . . .
      . . . .

где каждая точка является элементом sq, но я действительно хочу что-то, что перетекает вверх , чтобы они выглядели так:

      . . . .
. . . . . . .
. . . . . . .
. . . . . . .

или как, если размер браузера был изменен:

    . . . . . . .
. . . . . . . . .
. . . . . . . . .

У кого-нибудь есть идеи, возможно ли это в CSS?

Answer 1

Сложность в реализации этого, вероятно, значительно перевешивает стремление к результату. Вы можете достичь этого с помощью JavaScript / jQuery, но я не уверен, стоит ли это усилий?

Answer 2

В IE8 вы можете сказать -ms-writing-mode: rl-bt. Хотя writing-mode является частью CSS3 Text Layout , это значение в настоящее время не включено в черновую спецификацию.

Во всех других браузерах вам понадобится скрипт. Например, если у каждого .sq есть float: right;, вы можете добавить clear: right к каждому n-му элементу, начиная с конца списка. (Где n - это число квадратов, которое вы рассчитываете, будет соответствовать ширине.) Или просто float: left; и добавьте margin-left к первому квадрату, чтобы подтолкнуть его вправо так, как должно.

Answer 3

Это то, что вам нужно?

http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/