七、两列右列宽度自适应与三列中间列宽自适应

首页 > 网站建设 > 七、两列右列宽度自适应与三列中间列宽自适应

七、两列右列宽度自适应与三列中间列宽自适应

2007年11月14日网站建设 762 views

在css中实现两列右列宽度自适应与三列中间列宽度自适应的布局是相当简单的。下面分别作一解说：

一、两列右列宽度自适应
我们只需要设定左列为固定宽度，右列不设值，并且不浮动即可。代码如下：

CSS代码

#left,rightright{
background-color:#eeeeee;
border:1px solid #33ccff;
height:400px;
}
#left{width:180px;
float:left;
}

注：上面的写法一定要掌握住，利用群组标签把相同属性及参数写在一起，然后把不同的单独写出来。
这样左边将呈现出180px的宽度。而右侧则根据浏览器窗口大小来自动适应。
尝试把左栏宽度改为580px ，看有如何变化。
如图对比：一栏固定与一栏自适应的对比

这种布局方式常被应用到博客风格中。

二、三列中间列自适应：
这种样式细心的朋友会发现在第六节教程中已经提到这样的代码：

CSS代码

#left,#right{background-color:#eeeeee;border:1px dashed #33ccff;height:200px}
#left{float:left;width:180px}
#center{border:1px dashed #33ccff;} /*为了查看效果，只加了边框样式，便于观察*/
#right{float:rightright;width:200px;}

单单这样设置了左栏向左浮动，右栏向右浮动，是不够的，因为中间栏没有设定样式，它装根据左栏向左浮动，而在其右侧显示，而没有设定其宽度，所以将占据了所有的右边宽度。而右栏则根据block块状及向右浮动的属性在下一列右侧显示,如图上：

这样的布局显然不能满足我们的要求，这里我们就要引入除了浮动之外的另一个重要的属性：position绝对定位。
position:static;        /*默认值，无特殊定位,页面中的每一个对象默认都是这种属性 */
absolute;      /*对象从文档流中拖出，使用top,right,bottom,left等从最近的一个最有定位价值的父对象中绝对定位。 */
relative;      /*对象不可层叠，使用top,right,bottom,left等在正常文档流中偏移位置。 */
注意：某一对象使用了position:absolute;它将从本质上与其它对象中分离出来，它的定位不会影其它对象，也不会被其它对象的浮动定位所影响，可以这样理解，使用了此属性，对象就像一个图层一样浮在了网页之上。

明白了这个，我们再对上面的代码做一改进：

XML/HTML代码

<!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=gb2312″ />
<style type=“text/css”>
<!–
#left,#right,#center{background-color:#eeeeee;border:1px dashed #33ccff;height:200px}
#left{width:180px;
position:absolute;top:0px;left:0px;} /*此处让左栏绝对定位，距父对象上为0px,距父对象左为0px */
#right{width:200px;}
position:absolute;top:0px;right:0px;} /*此处让左栏绝对定位，距父对象上为0px,距父对象右为0px */
#center{margin-left:186px;margin-right:204px;}/*固定了左右栏的位置，我们再来设定此对象距左距右的宽度，从而调整其大小 */
–>
</style>
</head>
<body>
<div id =“left”>我的ID为left</div>
<div id =“center”>我的位置在中间</div>
<div id =“right”>我的ID为right</div>
</body>
</html>