当前位置: 代码迷 >> HTML/CSS >> css-layout(格局研究)之三
  详细解决方案

css-layout(格局研究)之三

热度:386   发布时间:2012-09-10 11:02:33.0
css-layout(布局研究)之三

第三篇我们来探讨左右下布局。没有定宽,百分比自适应

?

还是先看看效果图:

?



?然后上代码:

?

?

<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{}                                      /*外层容器没有限制*/
#wrapper{float:right;width:70%;}     /*右侧做右浮动,宽度70%*/
#navigation{float:left;width:29.9%;}  /*左侧做左浮动,宽度29.9%*/
#extra{clear:both;width:100%;}       /*清除一下*/
?

?