Home > Article > Web Front-end > 一个页面分为左中右3部分,中间部分像素固定为1000px, 中间部分要居中, 剩下左右2部分的宽度如何设置?_html/css_WEB-ITnose
因为个显示器的分辨率不一致,需固定中间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>
<!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>
中间部分是1000px的时候可以,但是改成500,或者800px就不居中了, 中间部分有时候可能需要调整的, 有什么好的解决方式
margin:0 auto;padding:0 auto;