>  기사  >  웹 프론트엔드  >  一个页面分为左中右3部分,中间部分像素固定为1000px, 中间部分要居中, 剩下左右2部分的宽度如何设置?_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 11:37:002556검색

因为个显示器的分辨率不一致,需固定中间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으로 문의하세요.