水平三栏式布局
来源:程序员人生 发布时间:2014-11-14 08:42:10 阅读次数:3040次
昨天被百度的大牛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要右浮动。
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠