CSS教程之CSS网页结构进门教程8：三列浮动两头列宽度自顺应

只看该作者 · 发表于 2015-1-16 10:39:01

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

当然空口无凭，下面我们就让大家看一下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></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
制造历程以下：
先设置body{margin:0px;}扫除失落body默许的界限，如许不会影响到三列的显现；
接着创立div标签，css的边框、背景致、宽度、高度不再胪陈，可参考之前的教程，详细说一下本例中新打仗的属性在css对话框中是怎样设置的：