标题:
CSS布局常用的方法5
[打印本页]
作者:
飞翔的蜗牛
时间:
2011-12-8 09:22
标题:
CSS布局常用的方法5
三行三列
xhtml:
QUOTE:
<div id="header">
这里是顶行
</div>
<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>
<div id="footer">
这里是底部一行
</div>
CSS:
QUOTE:
#header{width:100%; height:auto;}
#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;}
#footer{width:100%; height:auto;}
PS:
这里列出的是常用的例子,而非研究之用,对一每个盒子,我都没有设置
margin,padding,boeder
等属性,是因为我个人觉得,含有宽度定位的时候,最好不好用到他们,除非必不得已,因为如果不是这样的话,解决浏览器兼容问题,会让你头疼,而且产生一系列
CSS
代码,我觉得这样的效率和效果都不好!
欢迎光临 CSS论坛 (http://www.divcss5.com/bbs/)
Powered by Discuz! 6.1.0