Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

direction:rtl在布局中的使用

  也许是由于世界上大部分语言都是从左到右阅读的缘故,关于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样式。如果不是做阿拉伯语或古代汉语的项目基本不会用上,所以一般不必再深究它,只要了解即可。
网名:
54.146.214.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^