流式布局_流失布局百分比有空隙-CSDN博客

本文链接：https://blog.csdn.net/qq_33207292/article/details/78813459

这里写图片描述
之前这种布局都是百分比，包括间隙，直接问题是屏幕大的时候间隙太大，而需求是中间间隙不变，盒子随着屏幕变大变小，所以总结了一下，以后用的时候直接套就可以~

先贴结构：

    <div class="father">
        <div class="box1">
            <div>

            </div>
        </div>
        <div class="box2">
            <div></div>
        </div>
        <div class="box3">
            <div></div>
        </div>
    </div>

再贴css：

        .father{
            width:80%;
            height:500px;
            border: 1px solid #000;
            margin:100px auto;
        }
        .father > div{
            width:33.33333%;
            height:500px;
            float: left;
            box-sizing: border-box;
        }
        .box1{
            padding-right:6.66666px;
        }
        .box3{
            padding-left:6.66666px;
        }
        .box2{
            padding:0 3.33333px;
        }
        .father > div > div{
            width:100%;
            height:500px;
            background-color: red;
        }

运行结果：
这里写图片描述

间隙是父盒子的padding挤出来的，父盒子的width=33.33333%-padding的值
设box1的padding为x box2的padding为y
则有：
2y=x；x+y=20；（这里的20就是box1与box2之间的间隙）
如果你想要盒子之间的间隙是20px；

    .box1{
        padding-right:40/3
    }
    .box3{
        padding-left:40/3
    }
    .box2{
        padding:0 20/3
    }

以上就实现了中间间隙固定盒子自适应的布局，ie兼容到ie8

还有一种写法，兼容到ie10的
布局：

<div class="father">
            <div></div>
            <div></div>
            <div></div>
</div>

css：

.father{
        width:80%;
        height:500px;
        border: 1px solid #000;
        margin:100px auto;
        display:-webkit-box;
        display:box;
        display:flex;
        padding-left:10px;
        box-sizing: border-box;
    }
    .father > div{
        flex: 1;
        -webkit-box-flex:1;
        margin-right:10px;
    }
    .father > div:nth-child(1){
        background-color: red;
    }
    .father > div:nth-child(2){
        background-color: green;
    }
    .father > div:nth-child(3){
        background-color: blue;
    }

运行效果：
这里写图片描述

因为dispaly：flex兼容到ie10所以目前电脑端不采用手机端可以用

四列的情况：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{margin: 0;padding:0;}
    .wrap{
        display: flex;
        height: 400px;
    }
    .wrap div{
        background: blue;
        flex: 1;
    }
    .wrap div+div{
        margin-left: 10px;
    }
</style>
</head>
<body>
    <meta charset="UTF-8">
<title>四列等框</title>

<div class="wrap">
        <div>DIV1</div>
        <div>DIV2</div>
        <div>DIV3</div>
        <div>DIV4</div>
    </div>  
</body>
</html>

这里写图片描述
因为dispaly：flex兼容到ie10所以目前电脑端不采用手机端可以用

电脑端的写法：
css：

    .father{width: 80%;margin: 100px auto;overflow: hidden;}
    .father .son{width: 25%;height: 100px;float: left;box-sizing:border-box;margin-bottom: 20px;}
    .father .son>div{background: red;width: 100%;height: 100%;}
    .father .son:nth-child(1),.father .son:nth-child(4n+1){padding-right: 15px;}
    .father .son:nth-child(2),.father .son:nth-child(4n+2){
            padding-right: 10px;
            padding-left: 5px;
    }
    .father .son:nth-child(3),.father .son:nth-child(4n+3){
            padding-right: 5px;
            padding-left: 10px;
    }
    .father .son:nth-child(4),.father .son:nth-child(4n+4){
            padding-left: 15px;
    }

html：

<div class="father">
        <div class="son">
            <div></div>
        </div>
        <div class="son">
            <div></div>
        </div>
        <div class="son">
            <div></div>
        </div>
        <div class="son">
            <div></div>
        </div>
        <div class="son">
            <div></div>
        </div>
        <div class="son">
            <div></div>
        </div>
        <div class="son">
            <div></div>
        </div>
        <div class="son">
            <div></div>
        </div>
    </div>