zoukankan html css js c++ java

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

<!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>

<!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>

查看全文

相关阅读:
2014第8周二杂记
 2014第8周一JS正则小问题
 2014第7周日最强大脑
 2014第7周六杂记
 2014第7周五杂记
 2014第7周四excel多列文本复制技巧
 2014第7周三初识CouchBase
2014第7周二需求
 2014第7周1Web安全概念学习
 shell程序之逐行读取一文件里的參数且使用此參数每次运行5分钟

原文地址：https://www.cnblogs.com/moxiaowohuwei/p/7737446.html

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

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