水平三栏式布局
来源：程序员人生 发布时间：2014-11-14 08:42:10 阅读次数：3020次
昨天被百度的大牛http://www.wfuyu.com/cxyms/到了这个问题，我竟回答的莫名其妙。想自杀，现在挥泪总结。
布局以下：
<div id="left">左侧栏</div>
<div id="main">主内容</div>
<div id="right">右侧栏</div>
第1种实现方式：
利用定位，left和right分别左定位和右定位，并设置宽度，比如220px，中间的main要设置margin，给left和right预留出位置220px。以下：
<style type="text/css">
html,body{
padding:0;
margin:0;
}
#left,
#right {
position: absolute;
top:0;
width: 220px;
height: 100px;
}
#left {
left: 0;
background: red;
}
#right {
right:0;
background: green;
}
#main {
margin:0 230px;
height: 100px;
background: yellow;
}
</style>
第2种方式：用浮动实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>Document</title>
<!-- two -->
<style type="text/css">
#left,
#right {
width: 220px;
height: 200px;
background: blue;
}
#right {
float: right;
}
#left{
float: left;
}
#main {
background: red;
height: 200px;
}
</style>
</head>
<body>
<!-- two -->
<div id="left">左侧栏</div>
<div id="right">右侧栏</div>
<div id="main">主内容</div>
</body>
</html>
要注意left左浮动，right右浮动，main不浮动，但是，写的时候要先写right，后写main，由于right要右浮动。
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
