标题:
CSS布局常用的方法4
[打印本页]
作者:
飞翔的蜗牛
时间:
2011-12-7 10:09
标题:
CSS布局常用的方法4
xhtml:
QUOTE:
<div id="center" class="column">
<h1>This is the main content.</h1>
</div>
<div id="left" class="column">
<h2>This is the left sidebar.</h2>
</div>
<div id="right" class="column">
<h2>This is the right sidebar.</h2>
</div>
CSS:
QUOTE:
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 180px; right: 240px;margin-left: -100%;}
#right {width: 130px;margin-right: -100%;}
两行三列
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>
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;}
欢迎光临 CSS论坛 (http://www.divcss5.com/bbs/)
Powered by Discuz! 6.1.0