DIV+CSS最常用的网页布局代码
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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:
以下是引用片段：
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:
以下是引用片段：