CSS教程之CSS网页结构进门教程8：三列浮动两头列宽度自顺应
当然空口无凭，下面我们就让大家看一下Div+css在页面中达到的效果。[*]
[*]
本站2010年9月新增《十天学会web尺度（div+css）》系列教程，接待进修！
利用浮动定位体例，从一列到多列的流动宽度及自顺应，基础上能够复杂完成，包含三列的流动宽度。而在这里给我们提出了一个新的请求，但愿有一个三列式结构，个中左栏请求流动宽度，并居左显现，右栏请求流动宽度并居右显现，而两头栏必要在左栏和右栏的两头，依据摆布栏的间距变更主动顺应。这给结构提出了一个新的请求，并且纯真利用float属性与百分比属性其实不可以完成，CSS今朝还不撑持百分比的盘算准确到思索左栏和右栏的占位，假如对两头栏利用100%宽度的话，它将利用扫瞄器窗口的宽度，而非左栏与右栏的两头间距，因而我们必要从头的思绪来思索这个成绩。
相对定位
在入手下手如许的三列结构之前，有需要懂得一个新的定位体例——相对定位。后面的浮动定位体例次要由扫瞄器依据工具的内容主动举行浮动偏向的调剂，可是这类体例不克不及满意定位需求时，就必要新的办法来完成，CSS供应的撤除浮动定位以外的另外一种定位体例就是相对定位，相对定位利用position属性来完成。
position用于设置工具的定位体例可用值：static/absolute/relative
对页面中的每个工具而言，默许position属性都是static。
假如将工具设置为position:absolute，工具将离开文档流，依据全部页面的地位举行从头定位。当利用此属性时，可使用top,right,bottom,left即上右下左四个偏向的间隔值，以断定工具的详细地位，看以下CSS：
#layout{
position:absolute;
top:20px;
left:0px;
}假如#layout利用了position:absolute;将会酿成相对定位形式，与此同时，当设置top:20px;时它将永久离扫瞄器窗口的上方20px，而left:0px;将包管它离扫瞄器右边距为0px。。
注重：一个工具假如设置了position:absolute;它将从实质上与其他工具分别出来，它的定位形式不会影响别的工具，也不会被别的工具的浮动定位所影响，从某种意义上说，利用了相对定位以后，工具就像一个图层一样浮在了网页之上。
相对定位以后的工具，不会再思索它与页面中的浮动干系，只必要设置工具的top,right,bottom,left四个偏向的值便可。
而在本例中，利用相对定位则可以很好地办理我们所提出的成绩。一样，利用3个div构成我们的三个分栏布局：
#left{
background-color:#E8F5FE;
border:1pxsolid#A9C9E2;
height:400px;
width:200px;
position:absolute;
top:0px;
left:0px;
}
#right{
background-color:#FFE7F4;
border:1pxsolid#F9B3D5;
height:400px;
width:200px;
position:absolute;
top:0px;
right:0px;
}
如许，左栏将距右边left:0px;贴着右边缘举行显现，而右栏则将由right:0px;使得右栏距右显现，而两头的#center将利用一般的CSS款式：
#center{
background-color:#F2FDDB;
border:1pxsolid#A5CF3D;
height:400px;
margin-right:202px;
margin-left:202px;
}
关于#center，我们不必要再设定其浮动体例，只必要让它有右边外边距永久坚持#lef与#right的宽度，便完成了双方各让出202px的自顺应宽度，而摆布双方让的间隔，恰好让#left和#right显现在这个空间中，从而完成了罢了请求。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>三列摆布流动宽度两头自顺应——AA25.CN</title><style>body{margin:0px;}#left{background-color:#E8F5FE;border:1pxsolid#A9C9E2;height:400px;width:200px;position:absolute;top:0px;left:0px;}#center{background-color:#F2FDDB;border:1pxsolid#A5CF3D;height:400px;margin-right:202px;margin-left:202px;}#right{background-color:#FFE7F4;border:1pxsolid#F9B3D5;height:400px;width:200px;position:absolute;top:0px;right:0px;}</style></head><body><divid="left">左列</div><divid="center">中列——AA25.CN</div><divid="right">右列</div><!--本文章来自WWW.AA25.CN--></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
制造历程以下：
先设置body{margin:0px;}扫除失落body默许的界限，如许不会影响到三列的显现；
接着创立div标签，css的边框、背景致、宽度、高度不再胪陈，可参考之前的教程，详细说一下本例中新打仗的属性在css对话框中是怎样设置的：
<!--本文章来自WWW.AA25.CN-->
现在我们不再使用之前所学的“table”定位技术，而是采用Div+css的方式实现各种定位。 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）
页:
[1]