css实现”两边固定，中间自适应''

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>两边固定中间自适应</title>
</head>

<body>
    <p>float</p>
    <div class="content1">
        <div class="left1">left</div>
        <div class="right1">right</div>
        <div class="middle1">middle</div>
    </div>
    <p>position</p>
    <div class="content2">
        <div class="left2">left</div>
        <div class="right2">right</div>
        <div class="middle2">middle</div>
    </div>
    <p>flex</p>
    <div class="content3">
        <div class="left3">left</div>
        <div class="middle3">middle</div>
        <div class="right3">right</div>
    </div>
    <p>table</p>
    <div class="content4">
        <div class="left4">left</div>
        <div class="middle4">middle</div>
        <div class="right4">right</div>
    </div>
    <p>负margin</p>
    <div class="content5">
        <div class="middle">
            <div class="middle5">middle</div>
        </div>
        <div class="left5">left</div>
        <div class="right5">right</div>
    </div>
</body>

</html>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    /* 依据float */
    
    .left1 {
        width: 200px;
        height: 40px;
        background-color: rgb(128, 28, 28);
        float: left;
    }
    
    .right1 {
        width: 200px;
        height: 40px;
        background-color: rgb(35, 32, 179);
        float: right;
    }
    
    .middle1 {
        height: 40px;
        margin-left: 220px;
        margin-right: 220px;
        background: rgb(178, 235, 23);
    }
    /* 依据position */
    
    .content2 {
        width: 100%;
        position: relative;
    }
    
    .left2 {
        width: 200px;
        height: 40px;
        background-color: rgb(128, 28, 28);
        position: absolute;
        left: 0;
    }
    
    .right2 {
        width: 200px;
        height: 40px;
        background-color: rgb(35, 32, 179);
        position: absolute;
        right: 0;
    }
    
    .middle2 {
        height: 40px;
        margin-left: 220px;
        margin-right: 220px;
        background: rgb(178, 235, 23);
    }
    /* 依据flex */
    
    .content3 {
        width: 100%;
        display: flex
    }
    
    .left3 {
        width: 200px;
        height: 40px;
        background-color: rgb(128, 28, 28);
    }
    
    .right3 {
        width: 200px;
        height: 40px;
        background-color: rgb(35, 32, 179);
    }
    
    .middle3 {
        height: 40px;
        margin: 0 20px;
        background: rgb(178, 235, 23);
        flex: 1
    }
    /* 依据table */
    
    .content4 {
        width: 100%;
        display: table
    }
    
    .left4 {
        width: 200px;
        height: 40px;
        background-color: rgb(128, 28, 28);
        display: table-cell;
    }
    
    .right4 {
        width: 200px;
        height: 40px;
        background-color: rgb(35, 32, 179);
        display: table-cell;
    }
    
    .middle4 {
        height: 40px;
        margin: 0 20px;
        background: rgb(178, 235, 23);
    }
    /* 依据负margin*/
    
    .left5 {
        width: 200px;
        height: 40px;
        background-color: rgb(128, 28, 28);
        float: left;
        margin-left: -100%;
    }
    
    .right5 {
        width: 200px;
        height: 40px;
        background-color: rgb(35, 32, 179);
        float: left;
        margin-left: -200px;
    }
    
    .middle {
        width: 100%;
        height: 40px;
        float: left;
    }
    
    .middle5 {
        height: 40px;
        margin-left: 220px;
        margin-right: 220px;
        background: rgb(178, 235, 23);
    }
</style>
来源：https://blog.csdn.net/qq_35142645/article/details/100120587
标签
margin-left
background
margin
css