左右两列宽度固定，中间一列宽度自适应代码实例
分类：实例代码
在很多网站的布局中，都有这样的效果，那就是左右两列宽度固定，中间一列宽度自适应。
本站的头部其实就有这样的功能，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 20px;
}
#main {
float: left;
width: 100%;
background-color: green;
height: 400px;
}
#left {
width: 200px;
height: 500px;
float: left;
margin-left: -100%;
background-color: red;
margin-right: 20px;
}
#right {
margin-left: -120px;
float: left;
background-color: blue;
width: 120px;
height: 500px;
}
</style>
</head>
<body>
<div id="main"></div>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
* {
margin: 0;
padding: 0;
}
body {
padding: 20px;
}
进行一些初始化的设置，首先设置所有元素的内边距和外边距都为0。
然后设置body的内边距为20px，便于效果的观察。
#main {
float: left;
width: 100%;
background-color: green;
height: 400px;
}
这个是中间一列元素。
左浮动，宽度是百分之百。
#left {
width: 200px;
height: 500px;
float: left;
margin-left: -100%;
background-color: red;
margin-right: 20px;
}
设置为左浮动。
代码的关键是margin-left: -100%，元素的边界是由外边距确定的，所以将外边距设置为负数，那么中间一列元素就可以伸展到左列的下面。关于负外边距的具体用法可以参阅相关阅读。
二.相关阅读:
（1）.负外边距可以参阅css margin外边距一章节。
（2）.float可以参阅float浮动用法详解一章节。
左右两列宽度固定，中间一列宽度自适应代码实例，这样的场景在实际项目中还是用的比较多的，关于左右两列宽度固定，中间一列宽度自适应代码实例就介绍到这了。
左右两列宽度固定，中间一列宽度自适应代码实例属于前端实例代码，有关更多实例代码大家可以查看。