DIV+CSS最常用的网页布局代码

div css布局不同于table布局，它主要是按列来计算，而table是嵌套实现。

这里列举了最常见的
几种布局代码：
单行一列
以下是引用片段：
body { margin:0px; padding:0px; text-align:center; }
#content { margin-left:auto; margin-right:auto; width:400px; width:370px; }
两行一列
以下是引用片段：
body { margin:0px; padding:0px; text-align:center;}
#content-top{ margin-left:auto; margin-right:auto; width:400px; width:370px;}
#content-end {margin-left:auto; margin-right:auto; width:400px; width:370px;}
三行一列
以下是引用片段：
body { margin:0px; padding:0px; text-align:center; }
#content-top{ margin-left:auto; margin-right:auto; width:400px; width:370px; }
#content-mid{ margin-left:auto; margin-right:auto; width:400px; width:370px; }
#content-end{ margin-left:auto; margin-right:auto; width:400px; width:370px; }
单行两列
以下是引用片段：
#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:20px190px20px190px; }
#right {position:absolute;top:0px; right:0px; width:120px;}
f loat定位一
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;}
float定位二
xhtml:
以下是引用片段：
<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:
以下是引用片段：
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:
以下是引用片段：
<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:
以下是引用片段：
#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;}
三行三列
xhtml:
以下是引用片段：
<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:
以下是引用片段：
#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等属性！。