CSS布局 -- 左右定宽，中间自适应-白红宇

CSS布局 -- 左右定宽，中间自适应

阅读量：6255 次

发布时间：2019-06-22

本文共 2007 字，大约阅读时间需要 6 分钟。

左右定宽，中间自适应

有几种方法可以实现

改变窗口大小看看？

方案一：

左右设置绝对定位，定宽，中间设置margin-left margin-right

查看


     
     左右定宽，中间自适应(1)    
         
      left
        
      oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000
    
     
    
             
      middle
        
      HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        
    
     
    
         
      right
        
      BBBBBBBBBBBBBB        888888888888888888        BBBBBBBBBBBBBBBBBB        88888888888888888888

方案二：

采用负边距处理。左中右都float：left;

中间的div里边再设置一个div ,外层div占满 width:100%; 内层div使用margin-left 和margin-right

左边加上负边距 margin-left:-100% 拉回最左端

右边加上负边距 margin-left:-220px (即为右边的宽度)拉回最右端

查看


     
     左右定宽，中间自适应(2)    
         
              
       middle
        
       HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        
        
      
    
     
     
         
      left
        
      oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000
    
     
      
         
      right
        
      BBBBBBBBBBBBBB        888888888888888888        BBBBBBBBBBBBBBBBBB        88888888888888888888

方案三：

左边使用float:left 右边用float:right，html代码中的中间部分要放后边

查看


     
     左右定宽，中间自适应(3)    
         
      left
        
      oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000
    
     
    
         
      right
        
      BBBBBBBBBBBBBB        888888888888888888        BBBBBBBBBBBBBBBBBB        88888888888888888888
    
     
        
             
      middle
        
      HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh