javascript - 我可以让列表项看起来像一个堆栈吗

Question

通常情况下， float HTML 元素从左向右流动，如果达到容器的宽度则落在下一行。

我想知道，是否有任何方法可以让它们漂浮在底部。我的意思是元素应该彼此向上堆叠。

我想这个例子会很清楚http://jsfiddle.net/duGVa/

落在下一行的元素，即 LI-6，应该在其他 5 个元素的顶部。元素 1-5 应该触及容器 UL 的底部。

谢谢。

Answer 1

你可以作弊...

使用 CSS 转换来反转 UL 和 LI，您将获得想要的结果。

ul {
    width: 500px;
    height: 100px;
    background: #def;
    list-style-type: none;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: flipv();
}

li {
    background: #aaa;
    width: 50px;
    height: 40px;
    float: left;
    margin: 5px 25px;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: flipv();
}

参见 this fiddle (在 firefox、chrome 中测试过)