点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

CSS布局左侧定宽，右侧自适应_html/css

来源：动视网责编：小采时间：2020-11-27 16:04:22

CSS布局左侧定宽，右侧自适应_html/css

CSS布局左侧定宽，右侧自适应_html/css_WEB-ITnose: 左侧定宽，右侧自适应有很多种方法可以实现缩小窗口试试看？方案一：左边左浮动，右边加个margin-left 查看 demo 左侧定宽，右侧自适应(1) *{margin: 0;padding: 0;} .left{ float: left; width: 200px; border:

推荐度：

点击下载本文 文档为doc格式

导读CSS布局左侧定宽，右侧自适应_html/css_WEB-ITnose: 左侧定宽，右侧自适应有很多种方法可以实现缩小窗口试试看？方案一：左边左浮动，右边加个margin-left 查看 demo 左侧定宽，右侧自适应(1) *{margin: 0;padding: 0;} .left{ float: left; width: 200px; border:

　　左侧定宽，右侧自适应

有很多种方法可以实现

缩小窗口试试看？

方案一：

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

CSS布局左侧定宽，右侧自适应_html/css

推荐度：

点击下载本文 文档为doc格式

标签：左边右边左侧

热门焦点

CSS布局左侧定宽，右侧自适应_html/css

CSS布局左侧定宽，右侧自适应_html/css

left

right

left

right

left

right

left

right

left

right

CSS布局左侧定宽，右侧自适应_html/css

最新推荐

猜你喜欢

热门推荐