标签属性 dir

最新推荐文章于 2023-05-02 15:12:51 发布

@红@旗下的小兵

最新推荐文章于 2023-05-02 15:12:51 发布

阅读量497

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.csdn.net/qq_42778001/article/details/106461761

css 专栏收录该内容

12 篇文章

订阅专栏

本文探讨了CSS中dir属性的应用，特别是在多语言处理中的作用，如改变文档流方向，实现从左到右或从右到左的布局。通过具体实例展示了如何利用dir属性创建类似微信聊天界面的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dir

属性时可以改变文档流的水平流动方向，设计初衷是用在多语言处理中。

如：

英文和中文的阅读是从左忘右，阿拉伯语则是从右往左。

3个属性值：

ltr - 文档从左往右排列

rtl - 文档从右往左排列

auto - 浏览器自己决定排列方式

<style>
    .wra{
        width: 400px;
        border: 1px solid #cc511c;
    }
    .box{
        display: inline-block;
        max-width: 50%;
        height: 30px;
        background: coral;
        padding: 10px;
        margin: 5px;
        color: #fafffb;
    }
</style>
<div class="wra">
    <div class="box">我是一个div</div>
</div>
<div dir="rtl" class="wra">
    <div class="box">我是一个div</div>
</div>

应用：

实际开中，可以利用其改变文档流进行布局，像是微信聊天界面，自己的消息永远在右边，别人消息在左边：

在标签上加上 dir="rtl"

<style>
    .wra{
        width: 400px;
        border: 1px solid #cc511c;
    }
    .box{
        display: inline-block;
        max-width: 50%;
        height: 30px;
        background: coral;
        padding: 10px;
        margin: 5px;
        color: #fafffb;
    }
</style>
<div class="wra">
    <div class="box">别人的消息</div>
</div>
<div dir="rtl" class="wra">
    <div class="box">自己的消息</div>
</div>