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

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

2016-06-15 10:39:15 1814 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布局 三列中间固定宽度左右自适应

2016-03-16 10:38:39 1709浏览量 回答数 1

1

回答

在HTML中,表示页面背景的是<body bgcolor=>。这种说法对吗?

2021-11-22 23:12:17 384浏览量 回答数 1

1

回答

在HTML中,表示页面背景的是哪个呢?

2021-10-29 20:20:14 167浏览量 回答数 1

1

回答

HTML-更改\更新页面内容而无需刷新\重新加载页面?mysql

2020-05-17 11:39:30 302浏览量 回答数 1

2

回答

html 跳转页面 js代码怎么写

2018-05-10 19:59:58 1081浏览量 回答数 2

1

回答

chrome firefox 什么插件能检测HTML页面标签错误具体情况,比如<span></spam>,后面的标签写错了,插件马上就能标注

2016-06-15 11:22:21 1954浏览量 回答数 1

1

回答

HTML5 手机页面 输入表单被键盘遮挡住了

2016-06-07 09:35:21 2790浏览量 回答数 1

3

回答

jQuery如何获取HTML页面里的一些文本?

2016-06-02 17:09:07 2219浏览量 回答数 3

1

回答

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

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

1

回答

asp,net 如何读取html文件并显示在页面上?html文件地址是从数据库查询得到的?

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