css实现两列固定与一列自适应的几种方法

本文介绍了css实现两列固定与一列自适应的几种方法，分享给大家，具体如下：

1.flex布局

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。这里我们利用flex布局来实现两列固定一列自适应

    
    
    
     

    #main{
  display: flex;
  }

    #left{ 
 width:200px;
 height:400px; 
 background:aqua;
    }
    #center{
  flex-grow:1;  
  height:400px;  
  background:green;}
    #right{ 
 width:200px;
 height:400px;  
 background:blue;
 }
    


    
 
 
 
    

2.使用浮动方法

对左右两部分分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中。对中间文档流使用margin指定左右外边距进行定位。

    
    
    
     
    *{margin: 0;padding: 0;}
    #main{
  width: 100%;height: 400px;
  }
    #left{ 
 width:200px;
 height:400px;
 float: left; 
 background:aqua;
    }
    #center{
  width: 100%;
  height:400px;
  margin: 0 200px; 
  background:green;}
    #right{ 
 width:200px;
 height:400px;  
 float: right;
 background:blue;
 }
    


    
 
 
 
    

3.使用浮动加calc函数

对三部分使用float:left，然后左右两边固定宽度，中间使用calc函数计算宽度。

    
    
    
     
    *{margin: 0;padding: 0;}
    #main{
  width: 100%;height: 400px;
  }
    #left{ 
 width:200px;
 height:400px;
 float: left; 
 background:aqua;
    }
    #center{
  width: calc(100% - 400px);
  height:400px;
  float: left; 
  background:green;}
    #right{ 
 width:200px;
 height:400px;  
 float:left;
 background:blue;
 }
    


    
 
 
 
    

4.使用绝对定位

用绝对定位把左右两部分固定在两端，对中间文档流使用margin指定左右外边距进行定位。

    
    
    
     
    *{margin: 0;padding: 0;}
    #main{
  width: 100%;
  height: 400px;
  position: relative;
  }
    #left{ 
 width:200px;
 height:400px;
 position: absolute;
 left: 0;
 top: 0;
 background:aqua;
    }
    #center{
  width:100%;
  height:400px;
  margin: 0 200px;
  background:green;}
    #right{ 
 width:200px;
 height:400px;
 position: absolute;
 right: 0;
 top: 0;
 background:blue;
 }
    


    
 
 
 
    

效果图如下：

到此这篇关于css实现两列固定与一列自适应的几种方法的文章就介绍到这了,更多相关css 两列固定 一列自适应内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！