学习日记-浮动案例

 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* div:nth-child(4n){
          float: right;
      } */
     .v1{
         width: 1226px;
         height: 614px;
        
         background-color: #550;
         margin: 0 auto;

         }
      .v2{
          width: 234px;
          height: 614px;
          background-color: #333;
          float: left;   

      }
      .v3{
          width: 234px;
          height: 300px;
          background-color: #87ceeb;
          float: left; 
          margin-left: 14px;  
          margin-bottom:14px ;
      }
       /* .v4{
        width: 234px;
          height: 300px;
          background-color: #87ceeb;
          float: left; 
          margin-left: 14px; 
       } */
    </style>
</head>
            <body>
           <div class="v1">  
               <div class="v2"></div>             
               <div class="v3"></div>             
               <div class="v3"></div>             
               <div class="v3"></div>             
               <div class="v3"></div>             
               <div class="v3"></div>             
               <div class="v3"></div>             
               <div class="v3"></div>             
               <div class="v3"></div>             
           </div>
            </body>
</html>

效果

、

 

 

版权声明：本文为weixin_67940531原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。