热搜:NVER node 开发 php

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

2024-11-09 11:15:01
CSS布局  左侧定宽,右侧自适应_html/css_WEB-ITnose

  左侧定宽,右侧自适应

有很多种方法可以实现

缩小窗口试试看?

 

方案一:

左边左浮动,右边加个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