Rumah > Artikel > hujung hadapan web > 一个页面分为左中右3部分，中间部分像素固定为1000px, 中间部分要居中， 剩下左右2部分的宽度如何设置？_html/css_WEB-ITnose
一个页面分为左中右3部分，中间部分像素固定为1000px, 中间部分要居中， 剩下左右2部分的宽度如何设置？_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:37:002556semak imbas
因为个显示器的分辨率不一致，需固定中间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;
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：小米手机上！微信中，输入弹出键盘把页面顶变形了！_html/css_WEB-ITnoseArtikel seterusnya：如何使两个div并排_html/css_WEB-ITnose