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

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

WBOY
풀어 주다: 2016-06-24 11:37:00
원래의
2618명이 탐색했습니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿