"direction"有兩個值：ltr | rtl

ltr：從左往右
rtl：從右往左

默認：ltr

一起看個效果就懂了。

<style>div{direction:rtl;} </style> <div>這是什么啊</div>

本想它是否可以達到float的效果，結果發現很多坑。

如下，我本想讓第二個p標簽跑右邊去，結果不起作用。

其實也不是不起作用，因為它只是對里面的內容起作用。如果想讓文字跑右邊去，還得設置這個元素的寬度，因為inline-block默認寬度是靠內容得來的。

<style>body,p{margin:0;padding:0;}#box{width:200px;border:1px solid #ccc;}#box>p{display:inline-block;}#box>p:last-of-type{width:50px;background-color:red;direction:rtl;} </style> <div id="box"><p>左</p><p>右</p> </div>

但我們還不能設置這個元素為100%，不然就掉下去了，除非知道左邊那個元素的寬度然后通過calc函數減去這個值，不過其實還是不行的，因為inline-block也有個坑，它默認就會有幾px的間距。所有說，在模擬float效果這方面direction表示力不從心。那么direction究竟能干嘛？

如果想真的了解direction能干嘛，那么看一下，下面這些direction的奇怪表現，也許就是這些奇怪的表現讓direction有了活力。

一些奇怪的特征...

LI的小點跑右邊去了

<style>ul>li{width:100px;direction:rtl;} </style> <ul><li>1111</li><li>2222</li><li>3333</li> </ul>

還有這個

<style>div{direction:rtl;} </style> <div id="box">這是什么啊？</div>

這個

<style>body,p{margin:0;padding:0;}#box{width:200px;border:1px solid #ccc;direction:rtl;}#box>p{display:inline-block;} </style> <div id="box"><p>左</p><p>右</p> </div>

價值可能就是文字顛倒效果了。

另外它還可以配合unicode-bidi使用。

里面有一個unicode-bidi:bidi-override屬性，我們可以手動讓文字顛倒。

<style>body,p{margin:0;padding:0;}#box{direction:rtl;unicode-bidi:embed;} </style> <div id="box">CSS</div>

除了bidi-override它還有其他的幾個屬性，如下：

normal：對象不打開附加的嵌入層，對于內聯元素，隱式重排序跨對象邊界進行工作。 embed：對象打開附加的嵌入層，<' direction '> 屬性的值指定嵌入層，在對象內部進行隱式重排序。 bidi-override：嚴格按照 <' direction '> 屬性的值重排序。忽略隱式雙向運算規則。

我猜之所以會出現上面的奇怪現象就是因為它默認值是normal，對于內聯元素，隱式重排序跨對象邊界進行工作。這句話很關鍵，估計是不同當文字碰到不同格式的字就會創建一個內聯元素。

轉載于:https://www.cnblogs.com/pssp/p/5904139.html

總結

以上是生活随笔為你收集整理的css 用direction来改变元素水平方向，价值研究。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。