CSS两列及三列自适应布局方法整理_html/css_WEB-ITnose

在传统方法的基础上加入了Flex布局并阐述各方法的优缺点，希望对大家有所帮助。先上目录：

• 两列布局：左侧定宽，右侧自适应
  • 方法一：利用float和负外边距
  • 方法二：利用外边距
  • 方法三：利用position
  • 方法四：利用flex布局
• 三列布局：左右定款，中间自适应。
  • 方法一：使用负外边距
  • 方法二：使用绝对定位
  • 方法三：使用flex布局

两列布局：左侧定宽，右侧自适应

方法一：利用float和负外边距

            
 
 
    
        
右侧主体自适应区块
    
    
左侧定宽200px区块

• 优点：考虑了页面优化，右侧主内容区先加载，左侧后加载。

• 缺点：多添加了一层div包裹。

方法二：利用外边距

            
 
 
    
左侧定宽200px区块
    
右侧主体自适应区块

• 优点：代码简洁，便于理解

• 缺点：不利于页面优化，右侧主内容区后加载

方法三：利用position

            
 
 
    
右侧主体自适应区块
    
左侧定宽200px区块

• 优点：考虑到了页面优化，右侧内容区先加载

• 缺点：暂时没想到。。

上述三种方法兼容 IE7以上，但在IE7下不设置高度时，会产生高度错位bug。可通过设置父元素 font-size=0，再分别设置 子元素font-size解决。

方法四：利用flex布局

            
 
 
    
右侧主体自适应区块
    
左侧定宽200px区块
    

• 优点：CSS3新布局方式，高大上

• 缺点：仅支持 IE11+。

三列布局：左右定款，中间自适应。

方法一：使用负外边距

            
 
 
    
        
中间主体区域宽度自适应
    
    
左侧定宽200px
    
右侧定宽300px

• 优点：兼容IE7+，考虑到页面优化，中间内容区先加载

• 缺点：多一层div嵌套，不易理解

方法二：使用绝对定位

        
 
 
    
中列
    
左列
    
右列

• 优点：代码结构简单，考虑到了页面优化，中间内容去先加载

• 缺点：暂时没想到。。

方法三：使用flex布局

  
 
 
 
 
...
   

• 优点：高大上

• 缺点：仅支持IE11+