Home > Article > Web Front-end > 一个页面分为左中右3部分，中间部分像素固定为1000px, 中间部分要居中， 剩下左右2部分的宽度如何设置？_html/css_WEB-ITnose
一个页面分为左中右3部分，中间部分像素固定为1000px, 中间部分要居中， 剩下左右2部分的宽度如何设置？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:37:002545browse
因为个显示器的分辨率不一致，需固定中间div的宽度，剩下2边的宽度如何设置？
回复讨论(解决方案)
<!DOCTYPE HTML><html><head> <style type="text/css"> 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; } </style></head><body> <div class="right"></div> <div class="center"></div> <div class="left"></div></body></html>
<!DOCTYPE HTML><html><head> <style type="text/css"> 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; } </style></head><body> <div class="right"></div> <div class="center"></div> <div class="left"></div></body></html> 不好意思，写错了，把right和left的宽度改成50%就行了。
<!DOCTYPE HTML><html><head> <style type="text/css"> 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; } </style></head><body> <div class="right"></div> <div class="center"></div> <div class="left"></div></body></html> 不好意思，写错了，把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;
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：小米手机上！微信中，输入弹出键盘把页面顶变形了！_html/css_WEB-ITnoseNext article：如何使两个div并排_html/css_WEB-ITnose