CSS 俩边固定中间自适应(4种方法)

俩边固定中间自适应

1、float
2、flex布局
3、position绝对定位
4、calc计算函数(移动端慎用)
推荐使用 1 2 3 种方法

第一种：float;

HTML

<div class="screenBox">
	<div class="left"></div>
	<div class="right"></div>
	<!--如果使用float布局的话，中间的容器必须必须必须放到最后！！！-->
	<div class="center">中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,</div>
</div>

CSS

.screenBox {
        height: 600px;
    }

    .left,
    .right {
        width: 200px;
        height: 90%;
        background-color: yellow;
    }

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    .center {
        margin: 0 200px;
        height: 100%;
        background-color: blue;
    }

效果

第二种：flex布局

HTML

<div class="screenBox">
	<div class="left"></div>
	 <div class="center">中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,</div>
	<div class="right"></div>
 </div>

CSS

.screenBox {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
    }

    .left,
    .right {
        width: 200px;
        height: 100%;
        background-color: #999;
    }

    .center {
        flex: 1;
        height: 100%;
        background-color: #f00;
    }

效果

第三种：position绝对定位

HTML

<div class="screenBox">
	<div class="left"></div>
	<div class="center">中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,</div>
	<div class="right"></div>
</div>

CSS

.screenBox {
        position: relative;
        height: 600px;
    }

    .left {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 400px;
        background-color: blue;
    }

    .center {
        margin: 0 200px;
        height: 600px;
        background-color: yellow;
    }

    .right {
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 400px;
        background-color: red;
    }

效果

第四种：calc计算函数

calc() 函数用于动态计算长度值。
运算符前后都需要保留一个空格;
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 “+”, “-”, “*”, “/” 运算;
calc()函数使用标准的数学运算优先级规则;

<div class="screenBox">
	<div class="left"></div>
	<div class="center">
	中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,中间的box,
	</div>
	<div class="right"></div>
</div>

CSS

.screenBox {
        height: 600px;
    }

    .left {
        float: left;
        width: 200px;
        height: 400px;
        background-color: blue;
    }

    .center {
        float: left;
        /* 总宽度减去左右盒子的宽度 */
        width: calc(100% - 400px);
        background: yellow;
        height: 600px;
    }

    .right {
        float: left;
        width: 200px;
        height: 400px;
        background-color: red;
    }

效果

完！