左侧定宽,右侧自适应
有很多种方法可以实现
缩小窗口试试看?
方案一:
左边左浮动,右边加个margin-left
查看 demo
左侧定宽,右侧自适应(1) left
oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000
right
BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888 BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888
方案二:
左边左浮动,右边overflow:hidden 不过这种方法IE6下不兼容
查看 demo
左侧定宽,右侧自适应(2) left
oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000
right
BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888 BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888
方案三:
左边使用绝对定位,右边使用margin-left
查看 demo
左侧定宽,右侧自适应(3) left
oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000
right
BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888 BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888
方案四:
左边绝对定位,右边也绝对定位
查看 demo
左侧定宽,右侧自适应(4) left
oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000
right
BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888 BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888
方案五:
这种方法相对来说就有点复杂了,右边的div里边还有一个div
查看 demo
左侧定宽,右侧自适应(5) left
oooooooooooooo 0000000000000000 00000000000000000 ooooooooooooooo ooooooooooooooo 000000000000000
right
BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888 BBBBBBBBBBBBBBBBBBBBBBBBBBBBB 888888888888888888888888888888888