如何使大量图像浮动到右侧

Question

我正在尝试显示大量的图像缩略图，我希望图像浮动到div的右侧。

我首先尝试在每张图片上设置float: right属性。这正确地定位了它们，但是他们的订单混淆了，详见here。

该问题的部分解决方案是将单个图像浮动到 left ，同时将它们放置在向右浮动的容器div中。该部分解决方案已实施here。

这个部分解决方案的问题在于它仅在窗口足够宽时才起作用。如果窗口足够大以容纳单行上的所有图像，它们将与div的右边缘齐平。

然而，当窗口较窄时，图像会退回到左边缘。

有人知道如何确保图像与div的右边缘保持对齐，即使图像跨越多行吗？

Answer 1

您应该可以将图像设置为inline-block而不是浮动，并将其容器设置为text-align: right，这会影响内联元素和文本。

Updated Codepen

请注意，与几乎所有CSS一样，旧版Internet Explorer上存在inline-block支持的问题。

Answer 2

让我们说你的图片设置如下：

<ul class="images">
    <li><img src="" alt="Image 1"></li>
    <li><img src="" alt="Image 2"></li>
    <li><img src="" alt="Image 3"></li>
</ul>

然后设置如下样式：

.images {
    display: block;
    width: 100%;
    text-align: right;
}

.images li {
    width: 100%;
    display: inline-block;
}