html - 自下而上显示内联块元素，顶部有尾随元素

Question

我有一个<ul>列表display:inline-block项 - 它们按预期显示，当它们到达行尾时会像段落中的文本一样环绕。参见示例，其中有 6 个元素，第一行 4 个，第二行 2 个。

我希望将尾随元素放在顶部而不是底部。以前面的示例为基础，如果有 6 个元素，我希望 2 在顶部，4 在底部。

这是我正在寻找的元素的更新版本<ul>，但是此解决方案使用多个元素，这不是一个选项，因为元素的数量会经常变化，我不能每次都对其进行硬编码，尤其是考虑到移动设备。

如果可能的话，我更喜欢非 JavaScript 解决方案。正如我所暗示的，它应该是一个适合所有页面宽度的响应式解决方案（如果它不总是顶部 2，底部 6，通常底部更多，顶部更少，则没问题）。

我最大的问题是在某些屏幕尺寸下，由于尺寸和位置，我的元素会形成倒置的金字塔形状，我认为正面朝上的金字塔会更可取。

对于视觉学习者

什么是

应该是什么

相关示例代码

HTML

<ul>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
</ul>

CSS

li{
    display:inline-block;
    list-style-type:none;
}

Answer 1

为什么不颠倒 html 元素的顺序？无论如何，您可以使用 Js 反转顺序，如下所示： jQuery reversing the order of child elements

或者您可以尝试使用 flexbox，尽管缺少对它的支持：http: //caniuse.com/#search=flex

Answer 2

正如我的前辈所说，您在这里违背了事物的自然秩序；）但是...

根据内容的生成方式（CMS 等），您可以只计算元素并给第二个元素一个类，您可以使用该类添加右边距以占用该行。

希望有帮助。

Answer 3

我能够通过 CSS 实现这一点。通过将位置设置为相对，并将 top 属性设置为 100%，元素将从下向上呈现。

Answer 4

你应该尝试：

li{
  display:inline-block;
  list-style-type:none;
}

<ul>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <br>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
    <li><img src="http://placehold.it/200x200" /></li>
</ul>