Web中关于direction:rtl在布局中的使用详解

黄舟原创: 2017-07-27 14:27:32 2827浏览

　也许是由于世界上大部分语言都是从左到右阅读的缘故，关于direction:rtl的资料并不多。文字的从右到左书写方式具体的行为是在unicode中定义的，但这不是我们要考虑的。我们需要的是利用从右到左书写方式对block级盒子影响的相关特性来做基本布局。
　　要让内容向右跑我们通常会用text-align:right，但是那只是让内容右对其，就是一股脑的把元素推到右边。而有时候我们的需求是让内容逐个向右排列，所以会使用flaot:right。但是flaot:right也有它的问题，float本身会导致内容跑到流外，造成容器坍缩。这又需要其它措施来修正。
　　使用direction:rtl就可以做到类似float的效果，而且没有其它副作用，但前提是子元素必须是block级的元素。inline级的元素在rtl中可能会出现意料之外的结果，因为rtl会根据unicode中的字符属性对一些字符做特殊处理，具体的处理方式非常复杂，这篇文章就不提了。总之，如果这个rtl只为布局就不要在子元素中使用inline级的元素。

<style>
body {font:14px/18px Consolas;}
div {
  width:100px;padding:10px;
  margin:10px 0px 30px 0px;
  border:1px solid #CCC;
}
.float {overflow:hidden;} /*加overflow防止容器坍缩*/
.float span {float:right;}
.align {text-align:right;}
.align span {text-align:left;}
.direction {direction:rtl;}
.direction span {direction:ltr;display:inline-block;}
</style>
float right
<div class="float">
  <span>次</span><span>碳</span><span>酸</span><span>钴</span>
</div>
align right
<div class="align">
  <span>次</span><span>碳</span><span>酸</span><span>钴</span>
</div>
direction rtl
<div class="direction">
  <span>次</span><span>碳</span><span>酸</span><span>钴</span>
</div>