设置元素从右到左

1. 从右到左 float:right

  <h3>1. 从右到左 float:right</h3>
  <div style="border:4px solid #ccc;">
    <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;float:right;">1</div>
    <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;float:right;">2</div>
    <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;float:right;">3</div>
  </div>
使用float布局在实际场景中需要手动清理,否则会影响布局
2.1 从右到左 derection:rtl ，设置 css
  <h3>2.1 从右到左 derection:rtl</h3>
  <div style="border:4px solid #ccc;direction: rtl;display:flex;">
    <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;direction:ltr;">1</div>
    <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;">2</div>
    <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;">3</div>
  </div>
2.2 从右到左 dir="rtl" 设置元素属性 (推荐)
  <h3>2.2 从右到左 dir="rtl"</h3>
  <div style="border:4px solid #ccc;display:flex;" dir="rtl">
    <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;direction:ltr;">1</div>
    <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;">2</div>
    <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;">3</div>
  </div>
官方资料 - MDN：
developer.mozilla.org/en-US/docs/…
developer.mozilla.org/en-US/docs/…
developer.mozilla.org/en-US/docs/…
  
分类：
 前端
 
标签：
 
CSS前端
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
     
 

    参谋总长萨博
        公众号|参谋总长萨博