div css各种常见布局,(及布局技巧).doc

1、 下面列举了各种常见的 css+div 布局 1. 完全按%布局。2. 完全固定布局。3. 左侧按%变动，右侧固定布局。4. 右侧按%变动，左侧固定布局。5. 两侧按%变动，中间固定布局。6. 中间按%变动，两侧固定布局1. 完全按%布局。无标题文档 无标题文档 html,body padding:0px; margin:0px; text-align:center;#top margin:10px auto; border:#333 1px solid; width:85%; height:150px;#main margin:10px auto; width:85%; height:aut

2、o; border:#F00 1px solid; #main #left border: #FF0 1px solid; margin:1px; float:left; width:40%; height:300px; margin:1px;#main #right float: right; border:#0F0 1px solid; width:58%; height:600px;#bottom margin:10px auto; border:#333 1px solid; width:85%; height:150px;.clear border:0px; clear:both;

3、visibility: hidden; height:0px;top 部分左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动bottom 部分2. 完全固定布局。无标题文档 html,body padding:0px; margin:0px; text-align:center;#top mar

4、gin:10px auto; border:#333 1px solid; width:760px; height:150px;#main margin:10px auto; width:760px; height:auto; border:#F00 1px solid; #main #left border: #FF0 1px solid; margin:1px; float:left; width:200px; height:300px; margin:1px;#main #right float: right; border:#0F0 1px solid; width:550px; he

5、ight:600px;#bottom margin:10px auto; border:#333 1px solid; width:760px; height:150px;.clear border:0px; clear:both; visibility: hidden; height:0px;top 部分左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧

6、固定bottom 部分3左侧按%变动，右侧固定布局。右侧固定，左侧按 %比布局body padding:0px; margin:0px; text-align:center;div border: #000 solid 1px;#top border:1px #333 solid; height:150px; margin:10px auto; width:85%#contain margin:0px auto; width:85%; height:auto; border-color:#00F; padding:2px#left float:left; width:100%; border-

7、color: #F00; margin:0px -204px 0px 0px; #left #content border-color:#90F; height:700px; width:auto;margin-right:204px;#left #content_left float:left; width:49%; height:auto; border:none;#left #content_right float:right; width:49%; border:none;#right float:right; width:200px; border-color:#CF0; heigh

8、t:600px#bottom margin:10px auto; height:300px; width:85%;.clear clear:both; height:0px; border:0px; visibility:hidden;top 部分右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比

9、变动 右侧按百 右侧按百分比变动 右侧按百分比变动 右 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动侧按百分比变动 右侧按百分比变动分比变动左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定bottom 部分4右侧按%变动，左侧固定布局。无标题文档 html,body padding:0px; margin:0px; text-align:center;#top margin:10px auto; border:#333 1px

10、solid; width:80%; height:150px;#main margin:10px auto; width:80%; height:auto; border:#F00 1px solid; #main #left border: #FF0 1px solid; margin:1px; float:left; width:200px; height:300px; margin:1px;#main #right float: right; border:#0F0 1px solid; margin:2px 2px 2px -220px; width:100%#right_conten

11、t margin:2px 2px 2px 210px; border:1px #00F solid; width:auto; height:450px;#bottom margin:10px auto; border:#333 1px solid; width:80%; height:150px;.clear border:0px; clear:both; visibility: hidden; height:0px;top 部分左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定右侧按百分比变动

12、右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动bottom 部分5两侧按%变动，中间固定布局。无标题文档 html,body padding:0px; margin:0px; text-align:center;#top margin:10px auto; border:#333 1px solid; width:85%; height:150px;#mai

13、n border:#F00 1px solid; width:85%; margin:10px auto;#main #leftborder:0px; float:left; height:300px; width:50%; margin-right:-130px;#main #left_content width:auto; border:1px #000 solid; margin-right:130px; height:300px;#main #centerborder:#00F 1px solid; width:260px; height:600px; float:left;#main

14、 #rightborder:0px; float:right; height:300px; width:50%; margin-left:-134px#main #right_contentwidth:auto; border:1px #000 solid; margin-left:134px; height:515px;.clear clear:both; height:0px; border:0px; visibility:hidden; padding:0px; margin:0px;#bottomborder:#000 1px solid; height:300px; margin:1

15、0px auto; width:85%top 部分左侧按%变动 左侧按%变动 左侧按%变动 左侧按%变动 左侧按%变动 左侧按%变动 左侧按% 变动 左侧按%变动 左侧按% 变动 左侧按% 变动 左侧按%变动 左侧按%变动中间固定部分 中间固定部 中间固定部 中间固定部 中间固定部 中间固定部 中间固定部 中间固定部 中间固定部 中间固定部右侧按%变动 右侧按% 变动 右侧按% 变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按% 变动 右侧按% 变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按% 变动6中间按%变动，两侧固定布

16、局。无标题文档 html,body padding:0px; margin:0px; text-align:center;#top margin:10px auto; border:#333 1px solid; width:85%; height:150px;#main border:#F00 1px solid; width:85%; margin:10px auto; height:auto;#main #leftborder:#00F 1px solid; width:200px; height:550px; float:left;#main #centerborder:none; w

17、idth:100%; height:auto; float:left; margin:0px 0px 0px -406px;#center #center_contentborder:#00F 1px solid; height:auto; width:auto; margin-left:406px;#main #rightborder:#00F 1px solid; width:200px; height:550px; float: right;.clear clear:both; height:0px; border:0px; visibility:hidden; padding:0px;

18、 margin:0px;#bottomborder:#000 1px solid; height:300px; margin:10px auto; width:85%top 部分左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定中间按百分比变动 中间按百分比变动 中间按百分比变动 中间按百分比变动 中间按百分比变动 中间按百分比变动 中间按百分比变动 中间按百分比变动 中间按百分比变动右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定bottom 部分