Div CSS常用布局方式代碼集錦

來自： http://my.oschina.net/u/2460148/blog/626819

現在都Div CSS布局了，本文收集整理了一些常用的DivCSS布局代碼，比如兩行一列、三行一列、兩行兩列、三行兩列、兩行三列、單行三列以及float定位的代碼集錦，下面逐一帖出各個布局的代碼：

CSS一行一列布局代碼：

body{margin:0px;padding:0px;text-align:center;}
#content{margin-left:auto;margin-right:auto;width:400px;width:350px;}

CSS兩行一列布局代碼：

body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:350px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;width:350px;}

CSS三行一列布局代碼：

body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:320px;}
#content-mid{margin-left:auto;margin-right:auto;width:400px;width:320px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;width:320px;}

Div CSS三行兩列布局：

#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;}

兩行兩列布局：

#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:270px;}
#bodycenter#dv2{float:right;width:350px;}

單行兩列布局：

#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:410px;}

單行三列采用絕對定位CSS代碼：

#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:20px190px20px190px;}
#right{position:absolute;top:0px;right:0px;width:120px;}

單行三列采用float定位的CSS代碼：

<style>
#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;}
<style>
<divid="warp"> 
<divid="column"> 
<divid="column1">第一列</div> 
<divid="column2">第二列</div> 
<divclass="clear"></div> 
</div> 
<divid="column3">第三列</div> 
<divclass="clear"></div> 
</div>

兩行三列完整代碼：

<style>
#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;}
</style>
<divid="header">頭部行</div> 
<divid="warp"> 
<divid="column"> 
<divid="column1">第一列</div> 
<divid="column2">第二列</div> 
<divclass="clear"></div> 
</div> 
<divid="column3">第三列</div> 
<divclass="clear"></div>

三行三列布局，CSS與HTML代碼如下：

<style>
#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;}
</style>
<!--以下引用上邊的CSS定義-->
<divid="header">頂部行</div> 
<divid="warp"> 
<divid="column"> 
<divid="column1">第一列</div> 
<divid="column2">第二列</div> 
<divclass="clear"></div> 
</div> 
<divid="column3">第三列</div> 
<divclass="clear"></div> 
</div> 
<divid="footer">底部行</div>

   以下列出的代碼都沒有設置margin,padding,boeder等屬性，在使用時你可看情況自行定義。