网页布局:五种方法实现三栏布局
程序员文章站
2022-06-18 13:02:33
...
前言
以下五种方法都可以实现三栏布局,效果如下:
也可以自己调节属性参数,获得四栏、五栏等效果,或者是自己想要的宽度。
1、漂移布局
-
html
<div class="left-center-right"> <div class="left">左边</div> <!-- 右栏部分要写在中间内容之前 --> <div class="right">右边</div> <div class="center">中间</div> </div>
注意:右栏部分要写在中间内容之前。
-
css
.left-center-right>div { height: 150px; } .left { float: left; width: 300px; background: red; } .center { background: yellow; } .right { float: right; width: 300px; background: blue; }
2、绝对布局
-
html
<div class="left-center-right"> <div class="left">左边</div> <div class="center">中间</div> <div class="right">右边</div> </div>
因为是绝对布局,所以这里三栏的顺序没有要求。
-
css
.left-center-right>div { position: absolute; height: 150px; } .left { left: 0; width: 300px; background: red; } .center { /* 离左右各三百 */ right: 300px; left: 300px; background: yellow; } .right { right: 0; width: 300px; background: blue; }
3、flex布局
-
html
<div class="left-center-right"> <div class="left">左边</div> <div class="center">中间</div> <div class="right">右边</div> </div>
-
css
.left-center-right { display: flex; } .left-center-right>div { height: 150px; } .left { flex: 1; background: red; } .center { flex: 2; background: yellow; } .right { flex: 1; background: blue; }
采用flex布局的元素,称为flex容器,简称"容器"。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称"项目"。
把left-center-right设置为flex容器后,left、center和right就自动成为容器成员。
设置flex:1说明该容器成员的宽度占flex容器宽度的一份,flex:2说明该容器成员的宽度占flex容器宽度的两份。比如上面的css的容器成员一共设置了4份flex,所以left的宽度就占flex容器宽度的1/4,center占1/2,right占1/4。
4、表格布局
-
html
<div class="left-center-right"> <div class="left">左边</div> <div class="center">中间</div> <div class="right">右边</div> </div>
-
css
.left-center-right { display: table; height: 150px; width: 100%; } .left-center-right>div { display: table-cell; } .left { width: 300px; background: red; } .center { background: yellow; } .right { width: 300px; background: blue; }
5、网格布局
-
html
<div class="left-center-right"> <div class="left">左边</div> <div class="center">中间</div> <div class="right">右边</div> </div>
-
css
.left-center-right { display: grid; /* 行宽 */ grid-template-columns: 300px auto 300px; /* 行高 */ grid-template-rows: 150px } .left { background: red; } .center { background: yellow; } .right { background: blue; }