要求:3列布局,左栏要求固定宽度并且居左显示;右栏要求固定宽度并居右显示;而中间栏要求根据左右栏间距自适应居中显示。
说明:浮动定位:主要由浏览器根据对象的内容自动进行浮动方向的调整。当这种方式不能满足定位需求时,就需要用到绝对定位position属性来实现。有三个值position:static:默认属性值;position:absolute,对象将根据整个页面的位置进行重新定位,当使用次属性时,可以使用top,right,bottom,left4个属性进行方向定位,以确定对象的具体位置。position:relative,相对定位。
通俗的说:使用绝对定位position:absolute后,对象就像一个图层一样漂浮在网页上面。与其它对象分离开。
<!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=utf-8" />
<title>三列浮动中间列宽度自适应</title>
<style type="text/css">
body{margin:0px;padding:0px;} /*不设置次属性,中间的center会与left,right不在同一水平线上*/
#left{background-color:#cccccc;border:2px solid #333333;width:100px;height:300px;position:absolute;top:0px;left:0px;}
#center{background-color:#cccccc;border:2px solid #333333;height:300px;margin-left:104px;margin-right:104px;}
#right{background-color:#cccccc;border:2px solid #333333;width:100px;height:300px;position:absolute;top:0px;right:0px;}
</style>
</head>
<body>
<div id="left">左列</div>
<div id="center">中列</div>
<div id="right">右列</div>
</body>
</html>