[散分]DIV布局之三行三列之左右两栏固定中间自适应

飘零雾雨 2007-03-29 09:49:56

今天闲来无事，把以前的一些乱七八糟的东西整理了一下，有些可能有点用处，贴出来大家看看，借此机会散点分，好久没散分了（只接分，貌似不厚道^_^）

『这个布局其实是在之前两个layout上的一个延伸，做了之前两个，再做一个这样的layout应该不会有什么问题滴，手法都差不多。

要使宽度会自适应，顾名思义，就是宽度是不固定的，随外容器变化而变化。而在使用div布局上，就有这么一个优点，div是自动适应容器宽度的。而我们这里要注意的问题仅仅是如何让左右两栏始终固定在原位置，简单点的方法当然就是用float浮动，可以看下面例子：

［演示地址：http://pysj.v-ec.com/model/xhtmlcss/layout/layout3.htm］

CSS部分：

body {
font-family: Verdana, Arial;
margin: 0;
font-size: 12px;
}
#dyhead {
margin-bottom: 5px;
}
#dyleft {
float: left;
width: 200px;
}
#dycenter {
margin: 0 210px;
}
#dyright {
float: right;
width: 200px;
}
#dyfoot {
margin-top: 5px;
clear: both;
}
div {
background-color: #eee;
border: dotted 1px green;
}

先写#dyleft和#dyright两栏，避免#dycenter自动断行

HTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Css Layout</title>
</head>
<body>
<div id="dyhead">头部（3列布局，左右两栏宽度固定，中间栏自适应宽度）</div>
<div id="dyleft">左栏固定宽度为200px</div>
<div id="dyright">右栏固定宽度为200px</div>
<div id="dycenter">中间自适应宽度</div>
<div id="dyfoot">底部</div>
</body>
</html>

希望有更多更好的layout经验的朋友多交流交流^_^』

...全文