CSS左右布局中间自适应

方法1:左右div设置浮动，脱离标准流，中间那块元素就会上去。

（注意：html代码中中间部分的div必须放到左右div的后面）

<style>
        .boxLeft{
            min-height: 100px;
            width: 200px;
            background: #987;
            float: left;
        }
        .boxRight{
            min-height: 100px;
            width: 200px;
            background: #369;
            float: right;
        }
        .boxCenter{
            min-height: 100px;
            margin-left: 220px;
            margin-right: 220px;
            background: #192;
        }
</style>
<div class="box">
    <div class="boxLeft">left</div>
    <div class="boxRight">right</div>
    <div class="boxCenter">center</div>
</div>

方法2:左右绝对定位的两块div元素,脱离标准流，中间那块元素就会上去

（注意：中间部分的div必须放到左右div的后面）

<style>
        .boxLeft{
            min-height: 100px;
            width: 200px;
            background: #987;
            position: absolute;
            left: 0;

        }
        .boxRight{
            min-height: 100px;
            width: 200px;
            background: #369;
            position: absolute;
            right: 0;

        }
        .boxCenter{
            min-height: 100px;
            margin-left: 220px;
            margin-right: 220px;
            background: #192;
        }
</style>
<div class="box">
    <div class="boxLeft">left</div>
    <div class="boxRight">right</div>
    <div class="boxCenter">center</div>
</div>

方法3:设置flex:1;可以自适应剩余空间

（注意：中间部分的div必须放到左右div的中间）

<style>
        .box{
            display: flex;
        }
        .boxLeft{
            min-height: 100px;
            width: 200px;
            background: #987;
            position: absolute;
            left: 0;

        }
        .boxRight{
            min-height: 100px;
            width: 200px;
            background: #369;
            position: absolute;
            right: 0;

        }
        .boxCenter{
            min-height: 100px;
            margin: 0 220px;
            background: #192;
            flex: 1;
        }
    </style>
<div class="box">
    <div class="boxLeft">left</div>
    <div class="boxCenter">center</div>
    <div class="boxRight">right</div>
</div>

方法4:将父元素设置为display：table，width:100%，左右子元素设置display：table-cell

<style>
        .box{
            display: table;
            width: 100%;
        }
        .boxLeft{
            min-height: 100px;
            width: 200px;
            background: #987;
            display: table-cell;
        }
        .boxRight{
            min-height: 100px;
            width: 200px;
            background: #369;
            display: table-cell;
        }
        .boxCenter{
            min-height: 100px;
            margin: 0 20px;
            background: #192;
        }
</style>
<div class="box">
    <div class="boxLeft">left</div>
    <div class="boxCenter">center</div>
    <div class="boxRight">right</div>
</div>

方法5：中间部分浮动，设置宽度100%，充满整个屏幕宽，内部一个div放置内容，利用margin设置留出左右两块的宽度

 <style>
        .boxLeft{
            min-height: 100px;
            width: 200px;
            background: #987;
            float: left;
            margin-left: -100%;
        }
        .boxRight{
            min-height: 100px;
            width: 200px;
            background: #369;
            float: right;
            margin-left: -300px;
        }
        .boxCenter{
            min-height: 100px;
            float: left;
            width: 100%;
        }
        .center{
            min-height: 100px;
            margin-left: 220px;
            margin-right: 220px;
            background: #192;
        }
</style>
<div class="box">
    <div class="boxCenter">
        <div class="center">center</div>
    </div>
    <div class="boxLeft">left</div>

    <div class="boxRight">right</div>
</div>

文章转自：https://blog.csdn.net/sleepwalker_1992/article/details/82802202

来源：https://www.cnblogs.com/qing-5/p/11338819.html