CSS定位三栏布局

这里首先让中间栏绝对定位，两边栏相对定位；这里需要注意的是，如果中间使用绝对定位，不设置宽度的话将会撑不开容器；

因此，中间使用了相对定位后，同时设置margin-left和margin-right给左右两栏一定空间，然后左右两栏不管是相对定位还是绝对定位都可以，这里我们使用绝对定位：


<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>三列布局</title>
    <style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
        overflow: hidden;
    }
    .box .box-content {
        position: relative;
        height: 100%;
        margin-left: 210px;
        margin-right: 210px;
        background-color: blue;
    } 
    .box .box-left { 
        width: 200px; 
        position: absolute; 
        height: 300px; 
        left: 0;
        top:0;
        background-color: green; 
    } 
    .box .box-right { 
        width: 200px; 
        position: absolute; 
        min-height: 100%; 
        right: 0px;
        top:0;
        background-color: pink; 
    } 
    header,footer { height: 75px; background-color: aqua; } 
</style> 
</head>
<body> 
    <header> </header> 
    <div class="box"> 
        <div class="box-content">
            <div class="child">
                中间主题内容
            </div>
        </div>
        <div class="box-left">
            左边内容
        </div>
        <div class="box-right">
            右边内容
        </div> 
    </div>
    <footer>

    </footer>
</body>
</html>

</body></html>