html - 如何在 RTL 模式下对内联元素进行排序？

Question

我正在准备网站的 RTL 版本，但我对具体布局有疑问:

.content {
  width: 200px;
}

.content.rtl {
  direction: rtl;
  text-align: right;
}

<h5 class="content">
  <span>3</span> <span>h</span> &nbsp; <span>45</span> <span>min</span>
</h5>
<h5 class="content rtl">
  <span>3</span> <span>h</span> &nbsp; <span>45</span> <span>min</span>
</h5>

第一个 h5 标签将按以下顺序显示内容:“3h 45min”，现在我希望第二个标签显示以下内容:“min45 h3”，这基本上是相反的顺序。

问题是我收到以下消息:“h 45min 3”，但我不知道为什么。

您对如何解决该布局问题有什么建议吗？

Answer 1

只需使用 flex-direction:row-reverse

.content
{
	width: 200px;
}
.content.rtl
{
	display:flex;
  -webkit-flex-direction: row-reverse; 
  flex-direction: row-reverse;
}

<h5 class="content">
	<span>3</span>
	<span>h</span>
	&nbsp;
	<span>45</span>
	<span>min</span>
</h5>
<h5 class="content rtl">
	<span>3</span>
	<span>h</span>
	&nbsp;
	<span>45</span>
	<span>min</span>
</h5>
 Run code snippetCopy snippet to answerExpand snippet

使用 flex 方向