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在右邊：
因爲改變的只是內聯元素塊的左右順序，所有的文字，即使使用內聯標籤分隔，實際上，還是一個同質內聯盒子，是當作一個整體處理的，因此，只有近似右對齊效果，而具體每個文字都沒有左右順序的變化。
那什麼是“內聯元素塊”呢？包括替換元素(replaced element)，如<img>, <button>, <input>, <video>, <object>等，或者inline-block水平的元素。因此，上面span1,
span2的例子，只有任意一個span設置display:inline-block，都會看到左右順序的變化。
您可以狠狠地點擊這裏：CSS direction屬性與左右順序測試demo
在IE瀏覽器下(至少IE11)，設置direction:rtl會改變容器默認的text-align值，因爲IE11在內的瀏覽器（IE11以上版本我尚未測試）都不支持text-align:start/end等CSS3屬性值，而Chrome和FireFox瀏覽器均不會修改text-align值，因爲這些瀏覽器的text-align初始值是start，這裏大家也應該或多或少感受到了text-align:start/end這個新聲明的作用和意義了——當direction值爲ltr的時候，start就表示left，當direction值爲rtl的時候，start就表示right。