一个页面分为左中右3部分，中间部分像素固定为1000px, 中间部分要居中， 剩下左右2部分的宽度如何设置？_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 11:37:002591瀏覽
因为个显示器的分辨率不一致，需固定中间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;
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn