三种方法实现三栏式布局

Posted 2020-09-12

布局说明：

　　实现左右栏固定宽度，中间栏自适应的宽度。

如下图1所示：

 

 

 

 

 

 

 

 

 

 

 

 

方式一：圣杯布局

圣杯布局结构如下：

<div>
    <article class="main"></article>
    <aside class="left"></aside>
    <aside class="right"></aside>
</div>

圣杯布局样式如下：

　　1、主体div和公共样式的设置

 1 *{margin: 0;padding: 0;}
 2 
 3 div{
 4     background: #eee;
 5     padding: 20px 160px 20px 240px;/*腾出左右的空间用于布局走右侧*/
 6     margin: 20px;
 7     border: 1px solid #999999;
 8     box-sizing: border-box;
 9     overflow: auto;/*清浮动*/
10 }
11 
12 article,aside{
13     background: #FFF;
14     border:1px solid #999999;
15 }

　　2、中间栏的样式设置

1 .main{
2     width: 100%;/*撑满div的宽度*/
3     height: 300px;
4     float: left;
5     box-sizing: border-box;
6     padding: 20px;
7 }

　　3、左侧栏样式设置：

.left{
    width: 200px;
    height: 100px;
    float: left;
    position: relative;
    margin-left: -100%;/*配合float使用，是元素移动到与main同行的位置*/
    box-sizing: border-box;
    left: -220px;/*调整位置*/
    padding: 20px;
}

　　4、右侧栏样式设置：

.right{
    width: 120px;
    height: 200px;
    float: left;
    position: relative;
    margin-left: -120px;
    box-sizing: border-box;
    right: -140px;
}

　　5、极端判断设置：

@media only screen and (max-width: 650px) {/*解决浏览器窗口极端现象*/
    div{
        width: 610px;
    }
}

方法二：双飞翼布局：

　　1、主体结构：

<div id="container">
        <div id="wrapper">
            <div id="main">main</div>
        </div>
        <div id="left">left</div>
        <div id="right">right</div>
    </div>

　　2、公共样式与container样式设置：

body{
    padding: 20px;
    font-size: 14px;
    font-family: sans-serif;
}
#container{
    overflow: hidden;/*清浮动*/
    /*width: 100%;*//*可加可不加*/
    padding: 20px;
    background-color: #ccc;
    box-sizing: border-box;/*进入怪异盒模型*/
}

　　3、wrapper样式与main样式设置

#wrapper{
    width: 100%;
    float: left;/*这是必须*/
}
#main{
    height: 300px;
    border: 1px solid #555;
    margin-left: 220px;/*空开左侧栏*/
    margin-right: 140px;/*空开右侧栏*/
    background: #eee;
}

　　4、left样式设置：

#left{
    width: 200px;
    height: 200px;
    border: 1px solid #555;
    background: #fff;
    float: left;/*这是必须*/
    margin-left: -100%;/*将right移动到与#main同行*/
}

　　5、right样式设置：

#right{
    width: 120px;
    height: 120px;
    border: 1px solid #555;
    background: #fff;
    float: left;/*这是必须*/
    margin-left: -122px;/*将right移动到与#main同行*/
}

　　6、考虑极端，媒体查询：

@media only screen and (max-width: 600px) {/*解决浏览器窗口极端现象*/
    #container{
        width: 544px;
    }
}

方法三：左右浮动

　　1、结构布局（左右中）：

<div class="section">
            <div id="left_div"></div>
            <div id="right_div"></div>
            <div id="container"></div>
        </div>

　　2、section样式设置：

.section{
    border: 1px #999 solid;
    background-color: #eee;
    padding: 20px;
    margin: 20px;
    zoom: 1;/*IE请浮动*/
    overflow: hidden;/*IE请浮动*/
}
.section::after,section::before{
    content: ‘‘;
    display: block;
    visibility: hidden;
}
.section::after{
    clear: both;
}

　　3、left_div样式设置：

#left_div{
    width: 158px;
　　 height:100px;
    padding: 20px;
    border: 1px #999 solid;
    background: #fff;
    float: left;
}

　　4、right_div样式设置：

#right_div{
    width: 80px;
    height:100px;
    padding: 20px;
    border: 1px #999 solid;
    float: right;
}

　　5、container样式设置：

#container{
　　height:200px;
    margin-left: 220px;/*左侧留白*/
    margin-right: 140px;/*右侧留白*/
    border: 1px #999 solid;
}