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

qq_30702307 2015-09-10 03:34:28

因为个显示器的分辨率不一致，需固定中间div的宽度，剩下2边的宽度如何设置？

<div style="background-color:red;height:200px;float:left"></div><div style="width:1050px;margin:0px auto;background-color:#aaa;height:200px;float:left"></div>
<div style="background-color:black;height:200px;float:left"></div>

...全文

355 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

香蕉猪 2015-09-11

打赏
举报

margin:0 auto;padding:0 auto;

zpjshiwo77 2015-09-11

打赏
举报

引用

中间部分是1000px的时候可以，但是改成500，或者800px就不居中了，中间部分有时候可能需要调整的，有什么好的解决方式

注意 right: 50%; margin-right: -500px;这两个属性，这是要元素在浏览器中居中的，你要吧中间的div换成800，那么相应的 margin-right: -400px;。如果你要完全自适应就换成百分比，例如 width:80%; right: 50%; margin-right: -40%;

luqiao59 2015-09-10

打赏
举报

qq_30702307 2015-09-10

打赏
举报

引用 2 楼 zpjshiwo77 的回复:

[quote=引用 1 楼 zpjshiwo77 的回复:]


<!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%就行了。[/quote] 中间部分是1000px的时候可以，但是改成500，或者800px就不居中了，中间部分有时候可能需要调整的，有什么好的解决方式

zpjshiwo77 2015-09-10

打赏
举报

引用 1 楼 zpjshiwo77 的回复:


<!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%就行了。

zpjshiwo77 2015-09-10

打赏
举报


<!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>