三列布局

Posted langz-

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三列布局相关的知识，希望对你有一定的参考价值。

1.圣杯布局

整体思路：

中间列放在最前优先加载，并设置宽度100%自适应；

三列都向左浮动 (此时左右列在下面一行，因为中间列占100%)；

左列设置margin-left：-100%，右列设置margin-left:-宽度，使左右列与中间列同行 (此时左右列会遮挡中间列内容)；

给最外部container设置padding：0 左列宽度 0 右列宽度 ；

给左右列设置position：relative，分别向左向右移动-自身宽度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #container {
                overflow: hidden;
                padding: 0 200px 0 100px;
            }
            .main,.left,.right {
                position: relative;
                min-height: 200px;
                float: left;
            }
            .main {
                width: 100%;
                background-color: #8A2BE2;
            }
            .left {
                left: -100px;
                margin-left: -100%;
                width: 100px;
                background-color: #ADD8E6;
            }
            .right {
                right: -200px;
                margin-left: -200px;
                width: 200px;
                background-color: #FFB6C1;
            }
            
        </style>
    </head>
    <body>
        <div id="container">
            <div class="main">main</div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </body>
</html>

2.双飞翼布局

思路：

整体思路与圣杯布局大致相同，不同点在于处理左右列遮挡中间列；

双飞翼布局通过给中间列内再嵌套一个div，给该div设置margin：0 右列宽度 0 左列宽度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #container {
                overflow: hidden;
    
            }
            .main,.left,.right {
                min-height: 200px;
                float: left;
            }
            .main 
                width: 100%;
                background-color: #8A2BE2;
            }
            .main-content {
                margin: 0 200px 0 100px;
            }
            .left {
                margin-left: -100%;
                width: 100px;
                background-color: #ADD8E6;
            }
            .right {
                
                margin-left: -200px;
                width: 200px;
                background-color: #FFB6C1;
            }
            
        </style>
    </head>
    <body>
        <div id="container">
            <div class="main">
                <div class="main-content">main</div>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </body>
</html>

 

以上是关于三列布局的主要内容，如果未能解决你的问题，请参考以下文章

经典三列布局

三列布局（圣杯双飞翼）

三列布局

使用 flexbox 的 3 列流体布局 第三列向左推

css实现三列布局，左右固定值，中间自适应。

简单的CSS网页布局--三列布局