一个页面分为左中右3部分,中间部分像素固定为1000px, 中间部分要居中, 剩下左右2部分的宽度如何设置?_html/css_WEB-ITnose

因为个显示器的分辨率不一致,需固定中间div的宽度,剩下2边的宽度如何设置?

   

  

回复讨论(解决方案)

nbsp;HTML>html,body{margin: 0px;padding: 0px;height: 100%;}.center{background-color: red;width: 1000px;height: 100%;position: absolute;right: 50%;margin-right: -500px;z-index: 3;}.right{background-color: blue;width: 100%;height: 100%;position: absolute;right: 0px;margin-left: 50%;z-index: 2;}.left{background-color: blue;width: 100%;height: 100%;position: absolute;left: 0px;margin-right: 50%;z-index: 2;}

登录后复制登录后复制登录后复制

nbsp;HTML>html,body{margin: 0px;padding: 0px;height: 100%;}.center{background-color: red;width: 1000px;height: 100%;position: absolute;right: 50%;margin-right: -500px;z-index: 3;}.right{background-color: blue;width: 100%;height: 100%;position: absolute;right: 0px;margin-left: 50%;z-index: 2;}.left{background-color: blue;width: 100%;height: 100%;position: absolute;left: 0px;margin-right: 50%;z-index: 2;}

登录后复制登录后复制登录后复制

不好意思,写错了,把right和left的宽度改成50%就行了。

nbsp;HTML>html,body{margin: 0px;padding: 0px;height: 100%;}.center{background-color: red;width: 1000px;height: 100%;position: absolute;right: 50%;margin-right: -500px;z-index: 3;}.right{background-color: blue;width: 100%;height: 100%;position: absolute;right: 0px;margin-left: 50%;z-index: 2;}.left{background-color: blue;width: 100%;height: 100%;position: absolute;left: 0px;margin-right: 50%;z-index: 2;}

登录后复制登录后复制登录后复制

不好意思,写错了,把right和left的宽度改成50%就行了。

中间部分是1000px的时候可以,但是改成500,或者800px就不居中了, 中间部分有时候可能需要调整的, 有什么好的解决方式

中间部分是1000px的时候可以,但是改成500,或者800px就不居中了, 中间部分有时候可能需要调整的, 有什么好的解决方式

注意 right: 50%; margin-right: -500px;这两个属性,这是要元素在浏览器中居中的,你要吧中间的div换成800,那么相应的 margin-right: -400px;。如果你要完全自适应就换成百分比,例如  width:80%; right: 50%; margin-right: -40%;

margin:0 auto;padding:0 auto;

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3105637.html

(0)
上一篇 2025年3月29日 09:03:30
下一篇 2025年3月29日 09:03:36

AD推荐 黄金广告位招租... 更多推荐

发表回复

登录后才能评论