Grail layout: refers to the left and right width fixed in the middle of adaptive

The most common is float, but flex and positioning are also possible; Below I will carry out implementation one by one, if wrong, hope you put forward

Float method

HTML

<div class="grailLeft"> left </div> <div class="grailRight"> right </div> <div class="grailContent"> </div>Copy the code

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;       
}
Copy the code

Flex method

HTML

<div class="grailRight"> </div> <div class="grailRight"> </div> </div>Copy the code

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;      
}
Copy the code

The position method

HTML

<div class="grailLeft"> left </div> <div class="grailRight"> right </div> <div class="grailContent"> </div>Copy the code

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;       
}
Copy the code

The above three methods can be achieved; You can try it