三列布局

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网页布局--三列布局