CSS三列布局，左右宽度固定，中间自适应宽度
英文网站建设运用DIV对于页面宽度的自适应的布局，左右两栏布局自适应：左边栏固定，右边栏自适应，这个应该不是很难（左边栏设置一个固定宽度，float:left;就可以。右边栏width:auto; margin-left:相应宽度;即可）
这里介绍下左栏，右栏宽度固定，中间栏自适应宽度，现在介绍几个比较实用的方法：
第一个方法：关键是先写左右栏，最后写中间栏
<div style=”width:90%; margin:0 auto;”>
<div style=”width:200px; float:right; background-color:#960″>这是右侧的内容 固定宽度</div>
<div style=”width:150px; float:left; background:#6FF”>这是左侧的内容 固定宽度</div>
<div style=”margin-left:160px;margin-right:210px; background-color:#9F3″>中间内容，自适应宽度</div>
</div>
overflow :
<div style=”width:90%; margin:0 auto;”>
<div style=”width:200px; float:right; background-color:#960″>这是右侧的内容 固定宽度</div>
<div style=”width:150px; float:left; background:#6FF”>这是左侧的内容 固定宽度</div>
<div style=”margin-left:160px;margin-right:210px; background-color:#9F3; overflow:hidden”>中间内容，自适应宽度</div>
</div>
另一种方法 ：正当的写法，关键是* {margin:0;padding:0}
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
<style type=”text/css”>
* {
margin:0;
padding:0
}
.l-sidebar {
width:200px;
height:500px;
position:absolute;
top:0;
left:0;
background:blue;
}
.mainbar {
margin-left:200px;
height:500px;
margin-right:200px;
background:green;
}
.r-sidebar {
width:300px;
height:500px;
position:absolute;
top:0;
right:0;
background:blue;
}
</style>
</head>
<body>
<div class=”l-sidebar”></div>
<div class=”mainbar”></div>
<div class=”r-sidebar”></div>
</body>
</html>
本人也是从网上学习，以上方法试过了可行，也请大家多多指教。
星期三, 1月 13th, 2010 | 分类：英文网站建设 | RSS 2.0 | 留言/评论 | Trackback
顶了。真是高手