css direction屬性的使用與定義的詳解

CSS direction屬性簡單好記，屬性值少，相容性好，關鍵時候省心省力，是時候給大家宣傳宣傳，不要埋沒了人家的特殊技術。

文法：

direction : ltr | rtl | inherit

參數：
ltr : 　文字資料流從左至右
rtl : 　文字資料流從右至左
inherit : 　文字資料流的值不可繼承

說明：
用於設定文字資料流的方向。
假如您想應用direction屬性於內聯文本，您必須設定unicode-bidi屬性為embed或bidi-override。
對應的指令碼特性為direction。請參閱我編寫的其他書目。

樣本：

div { direction: rtl; unicode-bidi: bidi-override; }

基本上，大家只要關心下面這兩個屬性值就好了：

direction: ltr;   // 預設值direction: rtl;

其中，ltr是初始值，表示left-to-right，就是從左往右的意思，再具體描述下，就是內聯內容是從左往右依次排布的，我們平時網頁的處理都是這樣的，比方說前後兩個圖片，預設情況下，DOM在前的就顯示在左邊。

rtl則是另外一個值，right-to-left縮寫，就是從右往左的意思，再具體描述下，就是內聯內容是從右往左依次排布的，加入應用了這個CSS聲明，則前後兩個圖片，預設情況下，DOM在前的就顯示在右側；而且是在容器的右端。

例如mm1是張含韻，DOM結構如下：

<p class="rtl"><img src="mm1.jpg"> <img src="mm2.jpg"></p>

結果，張妹子跑到了最右邊，而不是左邊，同時，貌似靠右對齊容器了，如下：

改變的只是內嵌元素塊的左右順序
需要注意的是，當direction屬性的值是rtl的時候，我們的文字的前後順序是不變了，例如：

<p class="rtl"><span>span1</span> <span>span2</span></p>

結果，還是span1在左邊，span2在右邊：

因為改變的只是內嵌元素塊的左右順序，所有的文字，即使使用內聯標籤分隔，實際上，還是一個同質內聯盒子，是當作一個整體處理的，因此，只有近似靠右對齊效果，而具體每個文字都沒有左右順序的變化。