关于网页宽度的深入探讨

以前和学员们说过一点DIV+CSS的布局知识，早几天有学员问过我一个问题：如何去使一个结构比较复杂的页面自动适应宽度。这个问题有点复杂，于是写一个文档来说明一下我的看法。

1.首先说明一下简单的一列固定宽度。一列式布局是所在布局的基础，也是最简单的，代码也非常简单，只需要编写一个DIV就行了：

<div id=”div1”>一列固定宽度</div>

之后为这个非常好写样式，效果就不看了，可以预计，在默认状态下，就算没有设定DIV的宽度，DIV也将占据整行空间。这就是所谓的一列式了！

那么一列宽度如何自动适应呢？自动适应能够根据浏览器的大小自动改变其宽度和高度的值，这是一种很灵活的布局形式。实际上默认的DIV将占据整行的空间，也就是宽度为100%的空间，如果要做到自动适应只需要将其宽度修改为百分比的形式完成，如

#div1{

Background:red;

Width:80%

Height:200px

}

上面的代码的好处是，当浏览器窗口发生变化时，其宽度还是保持着与浏览器宽度当前宽度比例的80%的范围。

2.二列固定宽度：

二列宽度固定当然要用到两个DIV了。如有LEFT和 RIGHT两个DIV，我们需要这两具DIV在水平行中并列显示，从而形成二列式布局，代码可以这样写：

#left｛Background:red;

Width:200px;height:200px;float:left

｝

#lright｛Background:green;

Width:200px;height:200px;float:left

｝

这里面运用到了一个属性：FLOAT，它可以控制对像是否浮动，并设置浮动的方式，一般会有三个值：none,left,right。浮动是CSS布局的非常强大的功能，也是理解CSS布局的关键所在。

二列宽度自动适应：同样是对其宽度进行百分比的设置就行。

但是这里再提出一个问题，如果需要左或者右宽度固定，另一边却自动适应大小应该如何操作呢？其实非常简单，只需要将一边的宽度固定（设置一个值），另一边不设置任何宽度值，同时另一边也不能设置浮动就可以了。这样设置了固定宽度的列就呈现你所设置的宽度，另一列将根据浏览器窗口大小自动适应。

3.三列浮动中间列宽度自动适应：如果现在希望有这样的一个结构：左栏要求固定宽度并居左显示，右栏也要求固定宽度并居右显示，而中间栏要在左栏和右栏的中间，并根据左右栏的间距自动适应应该如何操作呢？这个问题不能简单套用上面所说的方法了，因为现在CSS还不支持百分比的计算可以精确到考虑了左右栏的占位，但是如何中间也只是运用了100%的宽度，这个宽度也只是针对整个浏览器而不是针对中间的间距的。解决方法有：

  （1）绝对定位：这个方法理论是可以解决这个问题的，我们可以设置这个DIV隔左栏或者右栏的距离从而达到在左右两栏中间的目的。就是设置左栏是绝对定位，右栏也是绝对定位，中间栏不需要设置浮动，只需要让其左边和右边的边距保持为左右两栏的宽度，便能实现两边各让出相应宽度而自动适应中间的宽度，于是这样能够解决刚刚提出的问题。

如：

#left｛Background:red;

Width:100px;

height:200px;

position:absolute;

top:0px;

left:0px;

｝

#lright｛Background:green;

Width:100px;

height:200px;

position:absolute;

top:0px;

right:0px;

｝

#center{

Background:yellow;

Width:200px;

height:200px;

margin-left:100px;

margin-right:100px;

}

说明一下绝对定位会存在一个问题，如果一个层使用了绝对定位，那本质是这个DIV是与其它对像分离出来的，它不会影响其它层但是也不会被其它层影响，就像一个图层漂在另一个图层上面一样。