Heim >Web-Frontend >HTML-Tutorial >一个页面分为左中右3部分，中间部分像素固定为1000px, 中间部分要居中， 剩下左右2部分的宽度如何设置？_html/css_WEB-ITnose
一个页面分为左中右3部分，中间部分像素固定为1000px, 中间部分要居中， 剩下左右2部分的宽度如何设置？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:37:002615Durchsuche
因为个显示器的分辨率不一致，需固定中间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;
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：小米手机上！微信中，输入弹出键盘把页面顶变形了！_html/css_WEB-ITnoseNächster Artikel：如何使两个div并排_html/css_WEB-ITnose