css中的圣杯布局

548 阅读1分钟

圣杯布局:是指左右宽度固定中间自适应

其实我们常用的应该是float,但是flex和定位也是可以实现的;下面我将一一进行实现,如不对之处望大家提出

float方法

HTML

<div class="grail">      
    <div class="grailLeft">左</div>      
    <div class="grailRight">右</div>      
    <div class="grailContent">中</div>
</div>

CSS

.grail {            
    background-color: #000;            
    height: 45px;            
    color: #fff;        
}        
.grailLeft {            
    float: left;            
    width: 100px;            
    height: 45px;            
    background-color: red;        
}        
.grailRight {
    float: right;
    width: 100px;
    height: 45px; 
    background-color: pink;        
}        
.grailContent {           
    height: 45px;            
    background-color: royalblue;       
}

flex方法

HTML

<div class="grail">      
    <div class="grailLeft">左</div> 
    <div class="grailContent">中</div>
    <div class="grailRight">右</div>
</div>

CSS

.grail { 
    display: flex; 
    justify-content: space-between;  
    background-color: #000; 
    height: 45px;
    color: #fff;        
}        
.grailLeft {
    width: 100px;           
    height: 45px;            
    background-color: red;       
}        
.grailRight {            
    width: 100px;           
    height: 45px;           
    background-color: pink;       
}        
.grailContent { 
    flex: 1;          
    height: 45px;          
    background-color: royalblue;      
}

position方法

HTML

<div class="grail">        
    <div class="grailLeft">左</div>        
    <div class="grailRight">右</div>       
    <div class="grailContent">中</div>    
</div>

CSS

.grail {            
    position: relative;           
    background-color: #000;            
    height: 45px;            
    color: #fff;        
}        
.grailLeft {
    position: absolute;           
    left: 0;            
    width: 100px;            
    height: 45px;            
    background-color: red;        
}       
 .grailRight {            
    position: absolute;            
    right: 0;            
    width: 100px;            
    height: 45px;            
    background-color: pink;        
}        
.grailContent {           
     height: 45px;            
     background-color: royalblue;       
}

以上的三种方法均可以实现;大家可以拿去试试看