float: right从右向左排序

最新推荐文章于 2024-04-28 10:27:05 发布

Forever_Sc

最新推荐文章于 2024-04-28 10:27:05 发布

阅读量7.2k

点赞数 1

分类专栏：前端学习笔记文章标签： html css

本文链接：https://blog.csdn.net/ForeverSober/article/details/74906055

版权

前端学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

问题

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