html - CSS水平滚动从右到左对齐

我想把div从右到左对齐。默认的对齐方式是从左到右

#row {
    white-space: nowrap; /* important */
    overflow: auto;
}
.items {
    display: inline-block;
}

<div id="row">
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 1" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 2" />
    </div>
</div>

如果我在float:right类中设置了float:left或.items，则不会出现水平滚动，项将溢出到底部（当我在行中添加更多项时）。

最佳答案

只需将direction从右向左添加到#row

#row {
    white-space: nowrap; /* important */
    overflow: auto;
    direction: rtl;
}
.items {
    display: inline-block;
}

    <div id="row">
        <div class="items">
            <img src="//placehold.it/200/100" alt="item 1" />
        </div>
        <div class="items">
            <img src="//placehold.it/200/100" alt="item 2" />
        </div>
    </div>

如果用更多的#row溢出.items容器，您将看到一个水平滚动条。
澄清
显然，text-align: right也做同样的工作，但这并不完全正确。
请考虑以下标记：

<div id="row">
    <div class="items">itemA</div>
    <div class="items">itemB</div>
    <div class="items">itemC</div>
</div>

你得到的

+-------------------------------------------+
|                   | itemC | itemB | itemA |
+-------------------------------------------+

你得到的

+-------------------------------------------+
|                   | itemA | itemB | itemC |
+-------------------------------------------+

关于html - CSS水平滚动从右到左对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30046275/