zoukankan      html  css  js  c++  java
  • 圣杯布局,不太明白为什么后面的元素会飘上来

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
     2 <html xmlns="http://www.w3.org/1999/xhtml">  
     3 <head>  
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
     5 <title>css 布局</title>  
     6   
     7 <style type="text/css">  
     8     body{  
     9         min-width: 988px;     
    10     }  
    11       
    12     #head{  
    13         text-align: center;   
    14     }  
    15     #container{  
    16         padding-left: 200px; /*left column width*/    
    17         padding-right: 150px; /*right column width*/  
    18         overflow: hidden;  
    19           
    20     }  
    21     #container .column{  
    22         position: relative;  
    23         float: left;  
    24     }  
    25       
    26     #center{  
    27           
    28         background:#eee;  
    29         padding: 10px 20px;   
    30         margin: 0 15px;  
    31         width: 100%;  
    32         min-height: 300px;  
    33         overflow:visible;  
    34     }  
    35       
    36     #left{  
    37         width:180px;  
    38         background:green;  
    39         margin-left:-100%;  
    40         right: 270px; /*180+60(padding total)+ 30(margin)*/  
    41         padding:0 10px; /* LC fullwidth + CC padding */  
    42         min-height: 300px;  
    43     }  
    44       
    45     #right{  
    46         width: 130px;  
    47         background:yellow;  
    48         padding: 0 10px;  
    49         margin-right: -240px; /*fullwidth  + center column padding 尽量大一点,chrome浏览器下,这个div浮动不上来*/  
    50           
    51         min-height: 300px;  
    52     }  
    53       
    54     #footer{  
    55         clear:  both;     
    56         text-align: center;  
    57     }  
    58       
    59     /*IE6 fix*/  
    60       
    61     * html #left {  
    62         left:100px;       
    63     }  
    64 </style>  
    65 </head>  
    66   
    67 <body>  
    68     <div id="head">  
    69         <h1>head</h1>  
    70     </div>  
    71       
    72     <div id="container">  
    73         <div id="center" class="column">  
    74             center  
    75         </div>  
    76           
    77         <div id="left" class="column">  
    78             left  
    79         </div>  
    80           
    81         <div id="right" class="column">  
    82             right  
    83         </div>      
    84     </div>  
    85       
    86     <div id="footer">  
    87         <h1>footer</h1>  
    88     </div>  
    89 </body>  
    90 </html>  
    坚持下去就能成功
  • 相关阅读:
    js对象数组(JSON) 根据某个共同字段 分组
    一个 函数 用来转化esSearch 的range 条件
    关于 vuex 报错 Do not mutate vuex store state outside mutation handlers.
    android listview 重用view导致的选择混乱问题
    android SDK和ADT的更新
    Android中adb push和adb install的使用区别
    pycharm中添加扩展工具pylint
    su Authentication failure解决
    Putty以及adb网络调试
    有关android源码编译的几个问题
  • 原文地址:https://www.cnblogs.com/suoking/p/4941263.html
Copyright © 2011-2022 走看看