问题
当多个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