css-layout（布局研究）之三

最新推荐文章于 2025-06-09 09:42:40 发布

iteye_2245

最新推荐文章于 2025-06-09 09:42:40 发布

阅读量175

点赞数

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

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

5 篇文章

订阅专栏

本文详细介绍了如何实现没有定宽、采用百分比自适应的左右下布局，通过HTML和CSS代码展示具体实现过程，并解释了各部分代码的功能。

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

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

还是先看看效果图:

然后上代码：

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