双飞翼 - 简书

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼（左右定宽，中间自适应）</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
            .middle{
                float: left;
                width: 100%;
                background-color: #fff9ca;
            }
            .middle-wrap{
                margin: 0 200px 0 150px;
            }
            .left{
                float: left;
                width: 150px;
                background-color: red;
                margin-left: -100%;       /*负边距的作用就是让左边div盖在中间div上面*/
            }
            .right{
                float: left;
                width: 200px;
                background-color: yellow;
                margin-left: -200px;    /*让右边的div覆盖在中间的div右边*/
            }
    </style>
</head>
<body>
    <!-- 最先渲染的是中间元素，然后才渲染两边元素 -->
    <div class="middle">
        <div class="middle-wrap">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
</html>