如何用html+css实现五列布局,其中第二、四列的宽度随浏览器窗口变化-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

如何用html+css实现五列布局,其中第二、四列的宽度随浏览器窗口变化

2016-06-15 10:39:15 1774 1

screenshot
如图所示,前后灰色列宽度一定,为左右边距;中间三列为网页内容区,整体居中显示,其中橙色的两列分别相当于左边栏和右边栏,宽度会随浏览器窗口的变化而变化,蓝色列宽度则不变。
如何用html+css来实现?
楼下有人已经给了很好的回答,非常感谢!用的是css3的新特性。
我想知道如果用css2,应该怎么实现?

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:38:50

    CSS2的实现,兼容IE6+:

    http://jsfiddle.net/humphry/kynUL/点击预览

    http://jsfiddle.net/humphry/kynUL/show/拖到地址栏看看吧。

    操作的时候注意以下几点:

    1. .sidebar-inner-l和.sidebar-inner-r的左右padding加起来等于.main的宽度。
    2. .main的right值等于负.sidebar-inner-l的右padding值
      3.这种方式仅仅能让.main基于页面的中轴定位

    4.没有考虑水平宽度过窄的情形,一般而言有个最小值(如980px)。

    0 0
相关问答

1

回答

html怎么引入css

2018-05-10 20:05:55 1113浏览量 回答数 1

2

回答

html中怎么引入css

2018-05-10 20:06:04 1258浏览量 回答数 2

1

回答

怎么在html中引入css

2018-05-10 20:06:48 1135浏览量 回答数 1

1

回答

可以将HTML页面的标题设置为“Web前端设计”的是什么呢?

2021-10-31 15:13:26 445浏览量 回答数 1

1

回答

如何把一个HTML页面嵌入到另一个HTML页面

2016-06-07 13:07:42 3596浏览量 回答数 1

2

回答

新建html5页面把生成的<meta charset="utf-8"> 改为gb2312出现乱码

2016-06-06 15:56:11 2208浏览量 回答数 2

1

回答

问 如何在html页面动态生成图片然后分享至微博?

2016-05-30 13:21:07 2041浏览量 回答数 1

1

回答

如何用springMVC 返回一个指定的HTML页面?

2016-03-17 09:56:55 4871浏览量 回答数 1

1

回答

两个HTML页面如何传递数据?

2016-03-16 17:59:09 2926浏览量 回答数 1

1

回答

在html中的meta中加了charset=utf-8后,页面就会自动的设定为utf-8字符集吗?

2016-03-13 14:20:01 2370浏览量 回答数 1
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载