日期:2014-05-17  浏览次数:20531 次

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%;}       /*清除一下*/
?

?