float: right從右向左排序
阿新 • • 發佈:2019-02-16
問題
當多個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>