float: right从右向左排序

问题

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

具体代码


<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">1div>
<div class="float2">2div>
<div class="float3">3div>
body>
html>

运行结果

float: right从右向左排序_第1张图片

你可能感兴趣的:(前端学习笔记)