一个页面分为左中右3部分，中间部分像素固定为1000px, 中间部分要居中，剩下左右2部分的宽度如何设置？_html/css

一个页面分为左中右3部分，中间部分像素固定为1000px, 中间部分要居中，剩下左右2部分的宽度如何设置？_html/css_WEB-ITnose

WBOY

發布： 2016-06-24 11:37:00

原創

2617 人瀏覽過

因为个显示器的分辨率不一致，需固定中间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;