CSS让内部元素以相反的顺序显示


代码如下:

1 <div id="main" style=" flex-direction: row-reverse;-webkit-flex-direction: row-reverse;display: flex; ">
2   <div style="background-color:coral;">A</div>
3   <div style="background-color:lightblue;">B</div>
4   <div style="background-color:khaki;">C</div>
5   <div style="background-color:pink;">D</div>
6   <div style="background-color:lightgrey;">E</div>
7   <div style="background-color:lightgreen;">F</div>
8 </div>

显示顺序为:E F D C B A

说明:

1) 样式: flex-direction: row-reverse;-webkit-flex-direction: row-reverse; 使其内部元素反转显示

2)容器必须是弹性盒子才有效,所以要加上样式:display: flex;


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM