内容简介：作者：前端林子本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果实现方法：需要左栏向左浮动，右栏向右浮动，中间设左右margin来撑开距离
作者：前端林子
本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果
1.方法一：自身浮动的方法
实现方法：需要左栏向左浮动，右栏向右浮动，中间设左右margin来撑开距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实现三栏布局1</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<!-- 左栏左浮右栏右浮，中间不设宽度用左右margin值撑开距离，且布局中中间栏放最后 -->
<!-- 中间栏实际宽度是当前屏的100% -->
<div class="left">左栏</div>
<div class="right">右栏</div>
<div class="middle">中间栏</div>
</body>
</html>
注意：该方法在html布局时，要把中间栏放在左栏、右栏后面，左栏和右栏的顺序不定
实现的效果如下：
自身浮动实现三栏布局
2.方法二：margin负值法
实现方法：两边两栏宽度固定，中间栏宽度自适应，左栏、右栏、中间栏向左浮动，左栏的margin-left设为-100%，中间栏的width设为100%，右栏的margin-left设为-右栏宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实现三栏布局2</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<!-- 左栏中间栏右栏左浮，左栏margin-left：-100%，中间栏宽100%,，右栏margin-left:-右栏宽度
且布局上必须中间栏放第一个-->
<div class="middle">中间栏</div>
<div class="left">左栏</div>
<div class="right">右栏</div>
</body>
</html>
注意：该方法在html布局时，要把中间栏放在第一个
此方法是实现圣杯布局和双飞翼布局的基础。
实现的效果如下：
margin负值法实现三栏布局
3.方法三：绝对定位法
实现方法：左栏、右栏绝对定位，分别固定到页面左右两侧，中间栏不设宽度，用左右margin来撑开距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实现三栏布局3</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<!-- 左右两栏绝对定位，分别固定到页面的左右两侧，中间栏不设宽度，用左右margin撑开距离 -->
<!-- 中间栏的实际宽度是当前屏的100% -->
<div class="left">左栏</div>
<div class="middle">中间栏</div>
<div class="right">右栏</div>
</body>
</html>
实现的效果如下：
此文已由腾讯云+社区在各渠道发布
获取更多新鲜技术干货，可以关注我们 腾讯云技术社区-云加社区官方号及知乎机构号
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- CSS布局：如何实现居中布局？
- 四种方法实现──三栏布局（圣杯布局、双飞翼布局）
- 响应式布局的实现
- 一个UI布局框架，以最少的代码实现UI设置及布局控制
- Android 实现一个通用的圆角布局
- CSS实现平行四边形布局效果
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Data Mining
Jiawei Han、Micheline Kamber、Jian Pei / Morgan Kaufmann / 2011-7-6 / USD 74.95
The increasing volume of data in modern business and science calls for more complex and sophisticated tools. Although advances in data mining technology have made extensive data collection much easier......一起来看看 《Data Mining》 这本书的介绍吧!
