CSS direction 使用

一、

在平常的应用中很少关注CSS direction的使用，今天偶尔看到相关内容，才发现CSS direction使用起来很多时候很方便。

二、首先我们需要关注两个重要的内容:

direction:ltr;//这个是默认值

direction:rtl

ltr是初始值，表示left-to-right，就是从左往右的意思.rtl则是另外一个值，right-to-left缩写，就是从右往左的意思。

<div class="rtl">
<img src="1.png"/>
<img src ="2.png"/>
</div>

如果给div设置direction为trl属性，则1.png就会在右侧，2.png在左侧。

需要注意的是如果是设置rtl属性的时候文字的前后顺序是不变的：<p
class="rtl"><span>span1</span> <span>span2</span></p>

因为改变的只是内联元素块的左右顺序，所有的文字，即使使用内联标签分隔，实际上，还是一个同质内联盒子，是当作一个整体处理的，因此，只有近似右对齐效果，而具体每个文字都没有左右顺序的变化。

那什么是“内联元素块”呢？包括替换元素(replaced element)，如<img>, <button>, <input>, <video>, <object>等，或者inline-block水平的元素。因此，上面span1, span2的例子，只有任意一个span设置display:inline-block，都会看到左右顺序的变化。