0
点赞
收藏
分享

微信扫一扫

浮动的顺序贴靠

八卦城的酒 2022-03-19 阅读 24

描述:

盒子的浮动按照顺序贴靠,如果父盒子的空间不够,则会再往前一个兄弟元素进行贴靠

相关截图:

        

相关代码:

<!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>浮动</title>
    <style>
        
        .box{
            width: 600px;
            height:300px;
            border: 1px solid #000;          
        }
        .box1{
            width: 350px;
            height:300px;
            background-color: red;
            float:left;
        }
        .box2{
            width:250px;
            height:150px;
            background-color: green;
            float:left;
        }
        .box3{
            width:250px;
            height:150px;
            background-color: blue;
            float:left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1" >1</div>
        <div class="box2" >2</div>
        <div class="box3" >3</div>
    </div>
</body>
</html>

扩展:

        1、如果box2和box1高度相同时,box3会顺着滑下去,形成贴靠box1的现象

         2、如果box2的高度大于box1时,会有有趣的现象发生,box3会直接掉下去,说明上述“1”中的贴靠现象实际上是box3掉落形成的。

 

举报

相关推荐

0 条评论