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>

查看全文

相关阅读:
leetcode--Populating Next Right Pointers in Each Node II
leetcode—Populating Next Right Pointers in Each Node
Pascal's Triangle II
leetcode—pascal triangle
leetcode—triangle
October 23rd, 2017 Week 43rd Monday
October 22nd, 2017 Week 43rd Sunday
October 21st 2017 Week 42nd Saturday
October 20th 2017 Week 42nd Friday
October 19th 2017 Week 42nd Thursday

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

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

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