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>  
    坚持下去就能成功
  • 相关阅读:
    java工程中如何连接redis数据库?
    linux启动达梦数据库
    Maven项目无法编译resources文件夹下资源
    java 后端定义的大写字段传到前端后变成小写
    springboot同时接收表单数据和文件
    java:Fastjson将object转为json时"$ref"的相关问题
    consul注册中心搭建
    maven-compiler-plugin 插件详解
    org.activiti.api.runtime.shared.UnprocessableEntityException
    https配置
  • 原文地址:https://www.cnblogs.com/suoking/p/4941263.html
Copyright © 2011-2022 走看看