css+div页面布局之2-- 固定宽度

1:2:1固定宽度布局详解

最新推荐文章于 2024-10-10 17:36:40 发布

原创最新推荐文章于 2024-10-10 17:36:40 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

35 篇文章

订阅专栏

本文详细解析了1:2:1固定宽度布局的实现方式，包括CSS样式和布局技巧，帮助开发者理解并应用这一布局模式。


<div id="container"> 
  <div id="header"><h1>header</h1></div>
  <div id="wrapper"><!-- 主体文字 -->  
    <div id="content"><p><strong>1) Content here.</strong></p></div>  
  </div>  
  <div id="navigation"><p><strong>2) right part here.</strong></p></div>  
  <div id="extra"><p><strong>3) left part here.</strong></p></div>      
  <div id="footer"><p>footer</p></div>  
</div>

1:2:1固定宽度布局：


body {text-align:center;display:block;}
div#container{width:700px;margin:0 auto;}
div#header{text-align:left;width:100%;}
div#footer{text-align:left;width:100%;clear:left;}
div#wrapper{float:left;width:100%}  
div#content{text-align:left;margin-left:150px;width:400px;background:lightgreen;}  
div#navigation{text-align:left;float:left;width:150px;margin-left:-700px;background:#B9CAFF}  
div#extra{text-align:left;float:left;width:150px;margin-left:-150px;background:#FF8539}

[img]http://dl2.iteye.com/upload/attachment/0105/4623/c51d7758-b52a-38e6-ab56-86d3f29069c3.jpg[/img]

1:1:2固定宽度布局：


body {text-align:center;display:block;}
div#container{width:700px;margin:0 auto;}
div#header{text-align:left;width:100%;}
div#footer{text-align:left;width:100%;clear:left;}
div#wrapper{float:left;width:100%}  
div#content{text-align:left;margin-left:300px;width:400px;background:lightgreen;}  
div#navigation{text-align:left;float:left;width:150px;margin-left:-700px;background:#B9CAFF}
div#extra{text-align:left;float:left;width:150px;margin-left:-550px;background:#FF8539}

[img]http://dl2.iteye.com/upload/attachment/0105/4635/b8d31a88-6316-351b-b9f9-5abea4285877.jpg[/img]

2:1:1固定宽度布局：

body {text-align:center;display:block;}
div#container{width:700px;margin:0 auto;}
div#header{text-align:left;width:100%;}
div#footer{text-align:left;width:100%;clear:left;}
div#wrapper{float:left;width:100%}  
div#content{text-align:left;margin-left:0px;width:400px;background:lightgreen;}  
div#navigation{text-align:left;float:left;width:150px;margin-left:-300px;background:#B9CAFF}  
div#extra{text-align:left;float:left;width:150px;margin-left:-150px;background:#FF8539}

[img]http://dl2.iteye.com/upload/attachment/0105/4616/90d064e0-24f4-38b7-9943-4acef91bf86b.jpg[/img]