css水平滚动从右到左排列

Question

我想从右到左对齐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，则不会显示水平滚动，并且项目会溢出到底部（当我在行中添加更多项目时）。

Answer 1

只需将direction r ight t o l eft添加到#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>

使用direction: rtl;即可获得

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

使用text-align:right;即可获得

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

Answer 2

您可以在.items上使用内联块的显示，只需将text-align添加到父元素，在这种情况下，div元素为div。

#row {
    white-space: nowrap; /* important */
    overflow: auto;
    text-align: right;/* added line */
}
.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>

Answer 3

从右边对齐的另一个选项是text-align:right;到#row

#row {
    white-space: nowrap; /* important */
    overflow: auto;
    text-align:right;
}
.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>