Кнопки укладки вверх

Question

Я никогда не видел этого раньше или, если у меня есть, я не заметил, как это было сделано.

Мне было интересно, есть ли способ с HTML и CSS, чтобы складывать элементы вверх, а не вниз как display: inline будет делать.В общем, я хочу пойти против гравитации, когда сложенные элементы доходят до конца строки.

В идеале, я хочу просто использовать CSS и HTML.Javascript, при необходимости, который, я думаю, может быть.

- вверх и больше ->

Answer 1

Если вы перевернете контейнер и детей, это будет выглядеть так, будто дети движутся в противоположном направлении.

Вот пример:

http://jsfiddle.net/WSBLv/

Я положил туда большую коробку и много маленьких. Все они используют float: left для перемещения элементов слева направо, сверху вниз.

Затем вы переворачиваете большой блок и все маленькие блоки с помощью CSS-преобразований:

-moz-transform: scale(-1);
-webkit-transform: scale(-1);
-o-transform: scale(-1);
-ms-transform: scale(-1);
transform: scale(-1);

Для Internet Explorer вы можете использовать фильтры!

filter: FlipH FlipV;

Тогда это выглядит так:

http://jsfiddle.net/NFSMm/

Answer 2

Вы можете использовать функцию jQuery insertBefore () для добавления элементов "поверх" других.

http://api.jquery.com/insertBefore/

Answer 3

Не очень элегантное решение, но вы можете использовать проставку <div> или изображение, чтобы заполнить это начальное пространство, и подтолкнуть все вправо. когда вы добавляете или удаляете элементы, вы расширяете или сжимаете div, чтобы сохранить его выравнивание.