当前位置:Gxlcms > html代码 > Web中关于direction:rtl在布局中的使用详解

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

时间:2021-07-01 10:21:17 帮助过:797人阅读

 也许是由于世界上大部分语言都是从左到右阅读的缘故,关于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样式。如果不是做阿拉伯语或古代汉语的项目基本不会用上,所以一般不必再深究它,只要了解即可。

以上就是Web中关于direction:rtl在布局中的使用详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行