CSS 元素从右到左排列

草帽lufei

发布于 2022-07-29 09:34:26

1.1K0

发布于 2022-07-29 09:34:26

文章被收录于专栏：程序语言交流

代码示例效果如上图

默认元素排列: 从左到右

 <h3>默认：从左到右</h3>
  <div style="border:4px solid #ccc;display:flex;">
    <div style="border:2px solid red;backgroun-color: #eee;width:60px;height:40px;margin-right:20px;">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>

设置元素从右到左

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：

https://developer.mozilla.org/en-US/docs/Web/CSS/float

https://developer.mozilla.org/en-US/docs/Web/CSS/direction

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-09-23，如有侵权请联系 cloudcommunity@tencent.com 删除

https