Div CSS常用布局方式代码集锦

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

现在都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等属性，在使用时你可看情况自行定义。

来源：oschina

链接：https://my.oschina.net/u/2460148/blog/626819

标签

css

绝对定位

margin

div