Question

是否可以仅使用css更改内联元素顺序？

就像我们有这个：

<span class="opening_quote">“</span>
<span class="text">Lorem ipsum...</span>
<span class="closing_quote">”</span>

文字将是多行的。
代码应支持ie6 + so：after和：before before not。

但是对于rtl方向，我们应该改变引号和文本的顺序：

“Lorem ipsum dolor sit amet, consectetur 
adipiscing elit”

到

Lorem ipsum dolor sit amet, consectetur”
                        “adipiscing elit

感谢。

Answer 1

您可以将.text span上的文字对齐（如已建议的那样）与更改float上的.opening_quote相结合，以便在需要时立即浮动或更改它使用absolute

定位到right: 0;

Answer 2

您需要创建以下结构：

<span class="text">Lorem ipsum...</span>
<span class="opening_quote">“</span>
<span class="closing_quote">”</span>

将absolute添加到引号取决于方向。

Answer 3

有一个CSS direction属性，当应用于父元素时，应满足您的需求。 MDN Link

<style>
.rtl {direction:rtl;}
</style>

<p class="rtl">
<span class="opening_quote">“</span>
<span class="text">Lorem ipsum...</span>
<span class="closing_quote">”</span>
</p>

See this JSFiddle

内联元素方向

3 个答案: