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

下面列举了各种常见的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:auto; 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; visibility: hidden; height:0px;top部分 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变动 左侧变 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 右侧变动 bottom部分2. 完全固定布局。无标题文档html,body padding:0px; margin:0px; text-align:center;#top margin: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; height:600px; #bottom margin:10px auto; border:#333 1px solid; width:760px; height:150px;.clear border:0px; clear:both; visibility: hidden; height:0px;top部分 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 右侧固定 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-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; height:600px#bottom margin:10px auto; height:300px; width:85%;.clear clear:both; height:0px; border:0px; visibility:hidden;top部分 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百 右侧按百分比变动 右侧按百分比变动 右 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动侧按百分比变动 右侧按百分比变动分比变动 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 bottom部分4右侧按%变动，左侧固定布局。无标题文档html,body padding:0px; margin:0px; text-align:center;#top margin:10px auto; border:#333 1px 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_content 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部分 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 左侧固定 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 右侧按百分比变动 bottom部分5两侧按%变动，中间固定布局。无标题文档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;#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 #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:10px auto; width:85%top部分 左侧按%变动 左侧按%变动 左侧按%变动 左侧按%变动 左侧按%变动 左侧按%变动 左侧按%变动 左侧按%变动 左侧按%变动 左侧按%变动 左侧按%变动 左侧按%变动 中间固定部分 中间固定部 中间固定部 中间固定部 中间固定部 中间固定部 中间固定部 中间固定部 中间固定部 中间固定部 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 右侧按%变动 6中间按%变动，两侧固定布局。无标题文档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; width: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; margin:0px;#bottomborder:#000 1px solid; height:300p