zoukankan      html  css  js  c++  java

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

    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.          960px; 
    14.         border: 1px solid #333; 
    15.         margin: 0 auto; 
    16.     } 
    17.      
    18.     #nav { 
    19.          200px; 
    20.         float: right; 
    21.     } 
    22.      
    23.     #content-wrapper { 
    24.         margin-right: -200px; 
    25.         float: left; 
    26.          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就可以浮动并且自适应浏览器宽度。 
  • 相关阅读:
    js正则表达语法
    Codeforces 976E/925C （01Trie树）
    ZOJ 3879（大模拟）
    CF967C（二分+细节）
    CF967A（细节模拟）
    HDU 2222（AC自动机模板）
    HDU 5510（KMP+思维）
    HDU 6273（树状数组+思维）
    HDU 6266（思维+规律）
    HDU 6264（思维）
  • 原文地址：https://www.cnblogs.com/zuowj/p/3474275.html
Copyright © 2011-2022 走看看