1.CSS布局常用的方法: float : none | left | right
取值: none : 默认值。对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边
它是怎样工作的,看个一行两列的例子
xhtml:
<div id="warp"> <div id="column1">这里是第一列</div> <div id="column2">这里是第二列</div> <div class="clear"></div> </div>
CSS:
#wrap{ width:100%; height:auto;} #column1{ float:left; width:40%;} #column2{ float:right; width:60%;} .clear{ clear:both;}
position : static | absolute | fixed | relative
取值:
static : 默认值。无特殊定位,对象遵循HTML定位规则 absolute : 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义 fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 relative : 对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置
它来实现一行两列的例子
xhtml:
<div id="warp"> <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布局!
2.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; }
三行一列
body { margin: 0px; padding: 0px; text-align: center; } #content-top { margin-left:auto; margin-right:auto; width: 400px;} #content-mid { margin-left:auto; margin-right:auto; width: 400px;} #content-end { margin-left:auto; margin-right:auto; width: 400px; }
两列 单行两列
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; } #bodycenter #dv1 {float: left;width: 280px;} #bodycenter #dv2 {float: right;width: 410px;}
两行两列
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;} #bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } #bodycenter #dv1 { float: left; width: 280px;} #bodycenter #dv2 { float: right;width: 410px;}
三行两列
#header{ width: 700px;margin-right: auto; margin-left: auto; } #bodycenter {width: 700px; margin-right: auto; margin-left: auto; } #bodycenter #dv1 { float: left;width: 280px;} #bodycenter #dv2 { float: right; width: 410px;} #footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
三列 单行三列 绝对定位
#left { position: absolute; top: 0px; left: 0px; width: 120px; } #middle {margin: 20px 190px 20px 190px; } #right {position: absolute;top: 0px; right: 0px; width: 120px;}
float定位
xhtml:
<div id="warp"> <div id="column"> <div id="column1">这里是第一列</div> <div id="column2">这里是第二列</div> <div class="clear"></div> </div> <div id="column3">这里是第三列</div> <div class="clear"></div> </div>
CSS:
#wrap{ width:100%; height:auto;} #column{ float:left; width:60%;} #column1{ float:left; width:30%;} #column2{ float:right; width:30%;} #column3{ float:right; width:40%;} .clear{ clear:both;}
出处:蓝色理想
责任编辑:moby
上一页 下一页 div+css布局漫谈 [2]
◎进入论坛网站综合、网页制作版块参加讨论
|