css-layout（布局研究）之二

iteye_2245

于 2012-04-08 19:18:36 发布

阅读量120

点赞数

分类专栏： css-layout（布局研究）文章标签： css-layout（布局研究）

css-layout（布局研究）专栏收录该内容

5 篇文章

订阅专栏

本文主要探讨960居中布局的概念及其应用，通过代码和CSS实现左中右三部分布局，详细解析各个组件的定位与样式设定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第二篇主要还是探讨的960居中布局，还是左中右三部分构成。

还是先看看效果图：

然后上代码：

<div id="container">  
      <div id="wrapper">  
        <!-- 中间content start -->  
         <div id="content" class="red">  
          content  
         </div>  
        <!-- 中间content end -->   
      </div>  
      <!-- 左侧navigation start -->  
      <div id="navigation" class="yellow">  
        navigation  
      </div>  
      <!-- 左侧navigation end -->  
        
      <!-- 右侧extra start -->  
      <div id="extra" class="orange">  
        extra  
      </div>  
      <!-- 右侧extra end -->  
   </div>

css代码：

#container{margin:0 auto;width:960px}                           /*这个定宽960*/
#wrapper{float:left;width:100%;}  
#content{margin:0 150px;}  
#navigation{float:left;width:150px;margin-left:-960px;}  /*定宽了*/
#extra{float:left;width:150px;margin-left:-150px;}          /*定宽了*/