圣杯布局，定宽 其余部分自适应。

1.

<!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>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
        
        .layout:after {
            clear: both;
            content: "";
            display: block;
        }
        
        .aside,
        .main {
            float: left;
            padding: 10px 0;
        }
        
        .layout {
            padding-left: 210px;
            width: 400px;
            text-align: center;
            margin: 0 auto;
            margin-top: 50px;
        }
        
        .main {
            width: 100%;
            background: burlywood
        }
        
        .aside {
            width: 200px;
            margin-left: -210px;
            background: blanchedalmond;
        }
    </style>
</head>

<body>
    <div class="layout">
        <div class="aside">侧边栏宽度固定</div>
        <div class="main">主内容栏宽度值适应</div>
    </div>
</body>

</html>

<!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>Document</title>
    <style>
        .layout:after {
            clear: both;
            content: "";
            display: block;
        }
        
        .layout {
            width: 400px;
            padding-right: 210px;
            text-align: center;
            margin: 0 auto;
            margin-top: 50px;
        }
        
        .main {
            width: 100%;
            float: left;
            background: burlywood;
            padding: 10px 0;
        }
        
        .aside {
            float: right;
            width: 200px;
            margin-right: -210px;
            background: blanchedalmond;
            padding: 10px 0;
        }
    </style>
</head>

<body>
    <div class="layout">
        <div class="main">主内容宽度自适应</div>
        <div class="aside">侧边栏宽度固定</div>
    </div>
</body>

</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>Document</title>
    <style>
        .layout:after {
            clear: both;
            content: "";
            display: block;
        }
        
        .aside,
        .main {
            float: left;
            padding: 10px 0;
        }
        
        .layout {
            padding: 0 210px;
            width: 400px;
            text-align: center;
            margin: 0 auto;
            margin-top: 50px;
        }
        
        .main {
            width: 100%;
            background: burlywood;
        }
        
        .aside {
            width: 200px;
            background: blanchedalmond;
        }
        
        .lefts {
            margin-left: -210px;
        }
        
        .rights {
            float: right;
            margin-right: -210px;
        }
    </style>
</head>

<body>
    <div class="layout">
        <div class="aside lefts">左侧边栏宽度固定</div>
        <div class="main">主内容宽度自适应</div>
        <div class="aside rights">右侧边栏宽度固定</div>
    </div>
</body>

</html>

4.

<!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>Document</title>
    <style>
        .layout:after {
            content: "";
            clear: both;
            display: block;
        }
        
        .aside,
        .main {
            float: left;
            padding: 10px 0;
        }
        
        .layout {
            padding-left: 420px;
            width: 400px;
            text-align: center;
            margin: 0 auto;
            margin-top: 50px;
        }
        
        .main {
            width: 100%;
            background: burlywood;
        }
        
        .aside {
            width: 200px;
            background: blanchedalmond;
        }
        
        .first {
            margin-left: -420px;
        }
        
        .second {
            margin-left: -210px
        }
    </style>
</head>

<body>
    <div class="layout">
        <div class="aside first">第一个侧边栏固定</div>
        <div class="aside second">第二个侧边栏固定</div>
        <div class="main">主内容栏宽度自适应</div>
    </div>
</body>

</html>

 

posted @ 2017-10-26 16:22  莫笑我胡为  阅读(173)  评论(0)  编辑  收藏  举报