css direction

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。