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

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

2020-11-27 15:28:45 责编:小采

　也许是由于世界上大部分语言都是从左到右阅读的缘故，关于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>

　　其实direction样式是个水很深的东西，这里只是用了它的一个基本性质来做布局。其它性质得从unicode的字符属性说起，还有相关的一个unicode-bidi样式。如果不是做阿拉伯语或古代汉语的项目基本不会用上，所以一般不必再深究它，只要了解即可。

下载本文

显示全文

全部频道