圣杯布局总结

1.左侧定宽,右侧自适应布局

html部分

<div class="parent">
    <div class="layout_left">左边宽度固定</div>
    <div class="layout_main">主内容宽度自适应</div>
</div>　

css部分

<style>
        *{
            margin:0;padding:0;
        }
        .parent:after {
            clear: both;
            content: " ";
            display: table;
        }
        .layout_left, .layout_main {
            float: left;
        }
        .parent {
            padding-left: 200px;
        }
        .layout_main {
            width: 100%;
            background:red;
        }
        .layout_left {
            width: 200px;
            margin-left: -200px;
            background:green;
        }
</style>

2.右侧定宽,左侧自适应布局

html部分

<div class="parent">
        <div class="layout_main">主内容栏宽度自适应</div>
        <div class="layout_right">侧边栏宽度固定</div>
</div>

css部分

<style>
        *{
            margin:0;padding:0;
        }
        .parent:after {
            clear: both;
            content: " ";
            display: table;
        }
        .parent {
            padding-right: 200px;
        }
        .layout_main {
            width: 100%;background:red;
            float: left;
        }
        .layout_right {
            float: right;
            width: 200px;background:green;
            margin-right: -200px;
        }
</style>

3.左/右侧定宽,中间内容自适应布局

html部分

<div class="parent">
        <div class="layout_aside layout_left">左侧宽度固定</div>
        <div class="layout_main">主内容栏宽度自适应</div>
        <div class="layout_aside layout_right">右侧宽度固定</div>
</div>

css部分

<style>
        *{
            margin:0;padding:0;
        }
        .parent:after {
            clear: both;
            content: " ";
            display: table;
        }
        .layout_aside, .layout_main {
            float: left;
        }
        .parent {
            padding:0 200px;
        }
        .layout_main {
            width: 100%;
            background:red;
        }
        .layout_aside {
            width: 200px;
            background:green;
        }
        .layout_left {
            margin-left: -200px;
        }
        .layout_right {
            margin-right: -200px;
            float: right;
        }
</style>

 

这些一般平时就够用了,最后附上作者链接

https://www.cnblogs.com/lyzg/p/5160570.html