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樣式。如果不是做阿拉伯語或古代漢語的項目基本上不會用上，所以一般不必再深究它，只要了解即可。

以上是Web中關於direction:rtl在佈局中的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！