css布局:中间固定,两边自适应

实现效果

一、float实现



  
    
    
    
    三栏布局——左右浮动布局
    
  
  
    
left
right
middle

二、flex实现
请移步flex笔记

HTML部分
CSS部分 body{ margin: 0; padding: 0; font-size: 30px; } .container { width: 100%; min-height: 100%px; background-color: lightsalmon; } .header { height: 68px; width: 100%; position: absolute; background-color: lightsalmon; } .content { display: flex; display: -webkit-flex; /*纵向排列*/ /* flex-direction: column; */ width: 100%; background-color:lightgreen; position: absolute; top:68px; bottom:68px; overflow: auto; /*超出的部分,滚动条显示*/ } .content-left { background-color: aquamarine; width: 320px; /* 不放大 不缩小 固定宽度320px */ flex: 0 0 320px; height: 100%; } .content-middle { background-color: yellow; height: 100%; flex: 1 1 auto; } .content-right { background-color: aquamarine; width: 320px; height: 100%; text-align: center; /* 不放大 不缩小 固定宽度320px */ flex: 0 0 320px; } .footer { width: 100%; height: 68px; position: absolute; bottom: 0; background-color: lightsalmon; }

补充知识
flex的属性取值
flex不写时,属性默认是0 1 auto,即
flex-grow为0,存在剩余空间也不放大
flex-shrink为1,空间不足该项目缩小
flex-basis为auto,该项目本来的大小
flex:1 1 1 auto;
flex-grow为1,存在剩余空间时放大
flex-shrink为1,空间不足该项目缩小
flex-basis为auto,自适应剩余的空间
三、absolute实现
左右两边设置absolute,分别设置left为0、right为0,设置宽度,中间部分只需设置左右的margin即可。



  
    
    
    
    Document
  
  
  
    
1
2
3

四、grid实现
Grid网格布局实现非常简单,只需几行代码。



  
    
    
    
    Document
  
  
  
    
1
2
3

五、table-cell



  
    
    三栏布局——table-cell布局
    
  
  
    
left
middle
right

总结:
1、float布局使用的时候一定要注意清除浮动。
2、Position布局只是根据定位属性来设置元素位置,不太适合用做页面布局。
3、flex布局虽然很好用,但是还是存在IE上的兼容性问题,只能支持到IE9以上。
4、grid网格布局很强大,但是兼容性很差。
5、table布局使用起来方便,兼容性也不存在问题,但是不利于搜索引擎抓取信息。
如果上面看不懂,可以看下这篇:


image.png



  
  
  Document




  

用flex-grow:(给中间元素设置 flex-grow: 1)

用flex-shrink:(给中间元素设置flex-shrink: 2,left 和 right 设置 flex-shrink: 0)

用flex + calc: (width: calc(100% - 200px);)

用万能定位法

用float:(*cneter放到最下面)

你可能感兴趣的:(css布局:中间固定,两边自适应)