html - 显示表格单元格顺序更改 CSS

Question

我正在使用设置为显示的 block 构建网页布局:表格单元格。一切正常，但我无法连续翻转单元格(更改它们的顺序)，想知道是否有这种可能性或我可以使用什么技巧来实现这一目标。

我需要仅使用 CSS 和显示来实现此目的:table-cell :)

提前感谢您的任何建议。

HTML

<div class="dtc">
    <div>Item1</div>
    <div>Item2</div>
</div>

CSS

.dtc{
    display: table;
    width: 100%;
}
.dtc > *{
    display: table-cell;
}

当前表:

+-------+-------+
| Item1 | Item2 |
+-------+-------+

期望的结果:

+-------+-------+
| Item2 | Item1 |
+-------+-------+

Answer 1

父级使用 RTL，子级使用 LTR。这将翻转订单。

.dtc { direction: rtl; }
.dtc > div { direction: ltr; }

没有针对子文本的 LTR，文本将无法正确对齐。