基于XHTML的DIV+CSS网页制作布局技术(2)

　　relative:??对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

　　它来实现一行两列的例子

　　xhtml:

　　<div id="wrap">

　　<div id="column1">这里是第一列</div>

　　<div id="column2">这里是第二列</div>

　　</div>

　　CSS:

　　#wrap{position:relative;/*相对定位*/width:770px;}

　　#column1{position:absolute;top:0;left:0;width:300px;}

　　#column2{position:absolute;top:0;right:0;width:470px;}

　　他们的区别在哪?

　　显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！

　　CSS常用布局实例

　　单行一列

　　body{margin:0px;padding:0px;text-align:center;}

　　#content{margin-left:auto;margin-right:auto;width:400px;}

　　两行一列

　　body{margin:0px;padding:0px;text-align:center;}

　　#content-top{margin-left:auto;margin-right:auto;width:400px;}

　　#content-end{margin-left:auto;margin-right:auto;width:400px;}