float: right从右向左排序

xiaoxiao2021-02-27  305

问题

当多个div一起向右浮动时,最终排列顺序不是按照HTML上的顺序,而是反向的。div1先向右浮动时,到达最右,占据空间后,div2只能占据其后的位置。最终看上去的效果,就是反向的。

具体代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Float: right 是右向左排列,顺序反向</title> <style> .float1, .float2, .float3 { float: right; width: 100px; height: 100px; line-height: 100px; text-align: center; color: #fff; } .float1 { background: blue; } .float2 { background: red; } .float3 { background: green; } </style> </head> <body> <div class="float1">1</div> <div class="float2">2</div> <div class="float3">3</div> </body> </html>

运行结果

转载请注明原文地址: https://www.6miu.com/read-7252.html

最新回复(0)