左右侧边栏固定宽,中间宽度自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三列布局</title>
    <style type="text/css">        
        *{margin: 0;padding: 0;}
        html, body{height: 100%;}

        /*定位布局*/   
        .container, .left, .right, .center { 
            height: 100%;
        }
        .container{ 
            position: relative;
        }
        .left, .right{
            top: 0;
            position: absolute;
            width: 200px;
        }
        .left{
            left: 0;
            background-color: #f60;
        }
        .right{
            right: 0;
            background-color: #e30;
        }
        .center{
            background-color: #fde560;
            padding: 10px 10px 0 10px;
            margin: 0 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="center">左右栏固定宽、中间栏宽度自适应</div>
        <div class="right"></div>
    </div>
</body>
</html>
html+css

 

posted @ 2017-11-15 14:59  蔚京霖  阅读(226)  评论(0编辑  收藏  举报