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

 

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd"&gt; 
  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就可变动并且由适应浏览器宽度。 

网站地图xml地图