HTML5网页设计

html_css

右边固定宽度左边自适应宽度的两列布局方法

时间:2012-10-01 17:00来自:网络作者:秩名点击:
一般的门户网站都采用了一种典型的960px的固定宽度布局,但现在的浏览器分辨率越来越大,有时候我们需要尽量利用屏幕的空间,特别是在做业务系统的时候。一种典型的场景是右边的导航栏固定宽度,而我们希望左边的宽度可以随着浏览器的宽度而自动适应。

一般的门户网站都采用了一种典型的960px的固定宽度布局,但现在的浏览器分辨率越来越大,有时候我们需要尽量利用屏幕的空间,特别是在做业务系统的时候。一种典型的场景是右边的导航栏固定宽度,而我们希望左边的宽度可以随着浏览器的宽度而自动适应。 

我们可以用js轻易做到这一点,但是我们希望只用css,这样更简洁。下面就介绍一下如果通过css的负边距(negative margin)做到这一点。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>一边固定宽度和一边自适应宽度的布局</title> 
  6. <style type="text/css"> 
  7.     body { 
  8.         padding: 0; 
  9.         margin: 0; 
  10.     } 
  11.      
  12.     #wrapper { 
  13.         width: 960px; 
  14.         border: 1px solid #333; 
  15.         margin: 0 auto; 
  16.     } 
  17.      
  18.     #nav { 
  19.         width: 200px; 
  20.         float: right; 
  21.     } 
  22.      
  23.     #content-wrapper { 
  24.         margin-right: -200px; 
  25.         float: left; 
  26.         width: 100%; 
  27.     } 
  28.      
  29.     #content { 
  30.         margin-right: 200px; 
  31.         padding: 0 10px; 
  32.     } 
  33.      
  34.     .clearfix:after { 
  35.         height: 0; 
  36.         content: "."; 
  37.         display: block; 
  38.         clear: both; 
  39.         visibility: hidden; 
  40.     } 
  41. </style> 
  42. </head> 
  43. <body> 
  44.     <div id="wrapper" class="clearfix"> 
  45.         <div id="content-wrapper"> 
  46.             <div id="content"> 
  47.                 <p> 
  48.                 2010年11月末经济适用房开发贷款。 
  49.                 </p> 
  50.                                  
  51.             </div> 
  52.         </div> 
  53.         <div id="nav"> 
  54.             <p>菜单1</p> 
  55.             <p>菜单2</p> 
  56.             <p>菜单3</p> 
  57.             <p>菜单4</p> 
  58.         </div> 
  59.     </div> 
  60. </body> 
  61. </html> 

以上代码的关键技术部分可以表述为:将一个宽度为100%的div的外边距(left-margin or right-margin)设置为某个负值,然后将其第一个子div的外边距(与父容器的边距同方向)设置为对应的正值,那么这个div就可以浮动并且自适应浏览器宽度。 

这个例子还使用了一个css“hack”技术,那就是使用psuedo css清除浮动造成的父容器高度不会自动撑大的问题。

当前文章地址:http://www.shejicool.com/web/html_css/348.html

相关文章
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐