Php 反向图像存档：使用CSS/Javascript从下到上堆叠图像？

想知道是否有人能解决这个问题。
我想提出一个缩略图像存档最早的底部和最新的顶部。我也希望流程本身是反向的。。。大概是这样的：

页面应该右对齐，并在页面顶部添加将来的图像。我使用PHP从MySQL数据库中提取图像文件名来动态创建页面。这里的问题是，我希望这个布局是流畅的，这意味着大多数用于计算图像和构建相应HTML的PHP技巧都不存在了

---

有没有一种方法可以通过Javascript甚至CSS来实现这一点？

CSS Flexible Box模块就是为这种类型的东西而设计的。请看我快速制作的一个例子：（看看Firefox中的这个）

现在坏消息是：你还不能真正依赖它。不仅规范正在被重写，当前的实现不支持

框行

（我在示例中也包括了这一行），这将允许项目位于多行中，而不是溢出

新的规范正在写入一些浏览器的开发版本中，所以它会发生。这只是时间问题

与此同时，也许类似的东西可能适合您的需要。

如果您想查看规范，可以在此处找到它：

请参阅：

这将使用

float:right

to，然后使用

transform:scaleY（-1）

，最后再次使用

transform:scaleY（-1）

它将在IE9和更高版本以及所有现代浏览器中工作

CSS:

#container, #container > div {
    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1);
}

#container {
    background: #ccc;
    overflow: hidden;
}
#container > div {
    float: right;
    width: 100px;
    height: 150px;
    border: 1px solid red;
    margin: 15px;
    font-size: 48px;
    line-height: 150px;
    text-align: center;
    background: #fff;
}

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    ..
</div>

HTML:

#container, #container > div {
    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1);
}

#container {
    background: #ccc;
    overflow: hidden;
}
#container > div {
    float: right;
    width: 100px;
    height: 150px;
    border: 1px solid red;
    margin: 15px;
    font-size: 48px;
    line-height: 150px;
    text-align: center;
    background: #fff;
}

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    ..
</div>

1.
2.
3.
..

这可以通过jquery插件解决。它有点像同位素，但对私人和商业用户免费。

您需要支持哪些浏览器/版本？如果答案恰好是“只有现代的”，那么你可以用CSS来实现。只有现代的就可以了。+1因为这是我尝试的（举个webkit的例子）。遇到了同样的问题，在该框线不工作！同位素确实很酷,，谢谢你介绍给我。我认为

转换

是一个比让PHP后端将元素反向打印到页面上复杂得多的解决方案。@George Pittarelli:在HTML中颠倒顺序，然后使用或两者之一都不能达到预期的效果。刚刚找到以下CSS代码用于寻址IE7和IE8以及

过滤器：flipv