CSS布局左侧定宽，右侧自适应_html/css_WEB-ITnose

有很多种方法可以实现

缩小窗口试试看？

方案一：

左边左浮动，右边加个margin-left

查看 demo

    
    
left
        
oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000
    
    
    
right
        
BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888
    

方案二：

左边左浮动，右边overflow：hidden 不过这种方法IE6下不兼容

查看 demo

    
    
left
        
oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000
    
    
    
right
        
BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888
    

方案三：

左边使用绝对定位，右边使用margin-left

查看 demo

    
    
left
        
oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000
    
    
    
right
        
BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888
    

方案四：

左边绝对定位，右边也绝对定位

查看 demo

    
    
left
        
oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000
    
    
    
right
        
BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888
    

方案五：

这种方法相对来说就有点复杂了，右边的div里边还有一个div

查看 demo

    
    
left
        
oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000
    
    
    
    
right
        
BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888