HTML写一个三栏布局,三种方法实现CSS三栏布局

本文由云+社区发表

作者：前端林子

本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果

1.方法一：自身浮动的方法

实现方法：需要左栏向左浮动，右栏向右浮动，中间设左右margin来撑开距离

CSS实现三栏布局1

body{

margin: 0;

padding: 0;

}

.left{

width:200px;

height: 300px;

background-color: #DC698A;

float:left;

}

.middle{

/*width:100%;*/

/*中间栏不要设宽度，包括100%*/

height: 300px;

background-color: #8CB08B;

margin:0 200px;

}

.right{

width: 200px;

height: 300px;

background-color: #3EACDD;

float: right;

}

左栏

右栏

中间栏

注意：该方法在html布局时，要把中间栏放在左栏、右栏后面，左栏和右栏的顺序不定

实现的效果如下：

自身浮动实现三栏布局

2.方法二：margin负值法

实现方法：两边两栏宽度固定，中间栏宽度自适应，左栏、右栏、中间栏向左浮动，左栏的margin-left设为-100%，中间栏的width设为100%，右栏的margin-left设为-右栏宽度

CSS实现三栏布局2

body{

margin:0;

padding:0;

}

.left{

width:200px;

height: 300px;

background-color: #DC698A;

float:left;

margin-left:-100%;

}

.middle{

width:100%;

height: 300px;

background-color: #8CB08B;

float:left;

}

.right{

width:200px;

height: 300px;

background-color: #3EACDD;

float: left;

margin-left: -200px;

}

中间栏

左栏

右栏

注意：该方法在html布局时，要把中间栏放在第一个

此方法是实现圣杯布局和双飞翼布局的基础。

实现的效果如下：

margin负值法实现三栏布局

3.方法三：绝对定位法

实现方法：左栏、右栏绝对定位，分别固定到页面左右两侧，中间栏不设宽度，用左右margin来撑开距离

CSS实现三栏布局3

body{

margin:0;

padding: 0;

}

.left{

width:200px;

height: 300px;

background-color: #DC698A;

position: absolute;

left:0;

top:0;

}

.middle{

/*width: 100%;*/

height: 300px;

background-color: #8CB08B;

margin:0 200px;

}

.right{

width:200px;

height: 300px;

background-color: #3EACDD;

position: absolute;

right:0;

top:0;

}

左栏

中间栏

右栏

实现的效果如下：

此文已由腾讯云+社区在各渠道发布