上一篇
下一篇
div+css三栏自适应宽度布局实例
日期:2009-06-17作者:woniu
常说的三栏布局主要是由#header、中间三栏、#Footer三大部分组成。中间三栏占整个页面的宽度，分为#left、#middle、#right，左右主要放一些导航链接，中间放主要内容。
用绝对定位的方法实现固定宽度的三栏布局并不难，但是如果想让宽度随着显示器分辨率自适应就有点困难了。
基本方法
基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充（padding）属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏（左栏或者右栏）的底端也是这样。
实例代码
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
html代码:
Example Source Code
<body>
<div id="header">
<h1>蜗爱css--www.woaicss.com</h1>
</div>
<div id="left">
#left----woaicss.com
</div>
<div id="right">
Starboard side text...
</div>
<div id="middle">
#Middle---woaicss.com
</div>
<div id="footer">
#Footer---woaicss.com
</div>
</body>
CSS代码:
Example Source Code
body {
margin: 0px;
padding: 0px;
}
#header {
clear: both;
height: 50px;
background-color: blue;
margin:0px 5px 5px 5px;
padding: 1px;
color:white;
}
#left {
float: left;
width: 150px;
background-color: red;
margin:0px 5px;
}
#right {
float: right;
width: 150px;
background-color: green;
margin:0px 5px;
}
#middle {
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
height:300px;
margin:0px 5px;
}
#footer {
clear: both;
background-color: yellow;
margin:5px 5px 0px 5px;
}
代码说明
HTML代码中各部分出现的顺序是非常重要的。左栏和右栏div必须在中栏之前出现。这样才可以让这两个边栏浮动到它们的位置上（屏幕两侧），并让中栏的内容将“流”入它们之间的空间。如果浏览器在一个或者两个边栏div之前先发现中栏，那么中栏将占据屏幕的一侧或者两侧，这样浮动的部分就会跑到中栏的下面而不是中栏的旁边了。
在div#middle样式中，没有clear，申明允许中栏的内容“流淌”在两个边栏之间。padding:0px 160px 5px 160px申明设置了到左栏和右栏的填充，这样允许150象素宽度的栏div，在加上10象素的间距。
这是用float实现的三栏液态布局的简单实例。
用绝对定位的方法实现固定宽度的三栏布局并不难，但是如果想让宽度随着显示器分辨率自适应就有点困难了。
基本方法
基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充（padding）属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏（左栏或者右栏）的底端也是这样。
实例代码
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
html代码:
Example Source Code <body>
<div id="header">
<h1>蜗爱css--www.woaicss.com</h1>
</div>
<div id="left">
#left----woaicss.com
</div>
<div id="right">
Starboard side text...
</div>
<div id="middle">
#Middle---woaicss.com
</div>
<div id="footer">
#Footer---woaicss.com
</div>
</body>
CSS代码:
Example Source Code body {
margin: 0px;
padding: 0px;
}
#header {
clear: both;
height: 50px;
background-color: blue;
margin:0px 5px 5px 5px;
padding: 1px;
color:white;
}
#left {
float: left;
width: 150px;
background-color: red;
margin:0px 5px;
}
#right {
float: right;
width: 150px;
background-color: green;
margin:0px 5px;
}
#middle {
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
height:300px;
margin:0px 5px;
}
#footer {
clear: both;
background-color: yellow;
margin:5px 5px 0px 5px;
}
代码说明
HTML代码中各部分出现的顺序是非常重要的。左栏和右栏div必须在中栏之前出现。这样才可以让这两个边栏浮动到它们的位置上（屏幕两侧），并让中栏的内容将“流”入它们之间的空间。如果浏览器在一个或者两个边栏div之前先发现中栏，那么中栏将占据屏幕的一侧或者两侧，这样浮动的部分就会跑到中栏的下面而不是中栏的旁边了。
在div#middle样式中，没有clear，申明允许中栏的内容“流淌”在两个边栏之间。padding:0px 160px 5px 160px申明设置了到左栏和右栏的填充，这样允许150象素宽度的栏div，在加上10象素的间距。
这是用float实现的三栏液态布局的简单实例。
文章来自: 
引用通告: 
Tags: 评论: 3 | 引用: 0 | 查看次数: -
回复
rr[2010-05-16 02:57 PM | 
]
写得很好，学习了，能不能请教一个问题，我是新手，采用三栏自适应宽度布局，marin和border都设为0,结果left，right，middle三栏中间出现一个空隙，背景图片对不上，博主能不能抽空看一下，不胜感谢挺好，学了招 
这个挺不错的，学习手下了~~
发表评论