向上堆叠按钮

Question

我以前从未见过这个，或者如果我有，我没有注意到它是如何完成的。

我想知道是否有一种方法可以使用HTML和CSS来堆叠元素，而不是显示为内联：内联可以。差不多，当叠加元素到达行尾时，我想反对引力。

理想情况下，我想使用CSS和HTML。 Javascript，如果需要，我认为它可能是。

- 向上和更多 - ＆gt;

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以使其保持对齐。