CSS 布局总结——固定宽度布局 - html/css语言栏目

2023/02/19 · admin

固定宽度的单列布局中，外层指定宽度（如果没指定宽度，会自动伸展），设置 margin: 20px auto; 实现居中即可。 HTML结构： [ html] <!DOCTYPE HTML> <html> <head> <title>单列固定宽度</title> <meta charset="utf-8" /> </head> <body> <div id="header"> <div class="warp"> <h2>Page Header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> <div class="footer"> <p>footer footer footer footer footer footer footer footer</p> </div> </div> </div> <div id="content"> <div class="warp"> <h2>Page Header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> <div class="footer"> <p>footer footer footer footer footer footer footer footer</p> </div> </div> </div> <div id="pagefooter"> <div class="warp"> <h2>Page Header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> <div class="footer"> <p>footer footer footer footer footer footer footer footer</p> </div> </div> </div> </body> </html> CSS： [css] body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } .warp{ border: 1px solid black; width: 760px; margin: 10px auto; } .warp h2{ background-color: #666; padding: 20px 20px 10px; margin: 0; } .warp .main{ background-color: #999; padding: 10px 20px; } .warp .footer p{ background-color: #CCC; color: #888; text-align: right; display: block; padding: 10px 20px 20px; margin: 0; } 1-2-1 布局实现固定宽度的 1-2-1 布局有两种方式，一种是使用 absolute 定位，一种是使用 float 布局。 HTML结构： [html] <!DOCTYPE HTML> <html> <head> <title>1-2-1 固定宽度</title> <meta charset="utf-8" /> </head> <body> <div id="header"> <p>Header</p> </div> <div id="container"> <div id="content"> <h2>Content Header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> <div id="side"> <h2>Side Header</h2> <div class="main"> <p> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br> 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </p> </div> </div> </div> <div id="footer"> <p>footer footer footer footer footer footer footer footer</p> </div> </body> </html> CSS： [css] body{ font: 13px/1.5 Arial; margin: 0; padding: 0; } #header, #container, #footer{ width: 760px; margin: 10px auto; } #header{ border: 1px solid black; background-color: #666; } #footer{ border: 1px solid black; background-color: #CCC; } 1）使用 absolute 定位：用这种方法只需要确定其中一列的宽度，并设为 absolute: absolute; 另一列使用margin 定位。注意父元素设为 position:relative; 而且设为 absolute 的列必须比另一列高度小。 [css] #container{ position: relative; } #content{ border: 1px solid black; background-color: #999; width: 500px; position: absolute; top: 0; left: 0; } #side{ border: 1px solid black; background-color: #999; margin-left: 520px; } 2）使用float 定位：使用这种方法两列都必须设置宽度，并且要在最后加一个空的元素 <div id="clear"></div> [css] #content{ border: 1px solid black; background-color: #999; width: 500px; float: left; } #side{ border: 1px solid black; background-color: #999; width: 250px; float: right; } #clear{ clear: both; }

CSS 布局总结——固定宽度布局 - html/css语言栏目

相关文章

最新评论

最近发表

网站分类

文章归档