ページは左、中央、右の 3 つの部分に分かれています。中央部分のピクセルは 1000px に固定されています。残りの 2 つの部分の幅を設定するにはどうすればよいですか。 _html/css

ページは左、中央、右の 3 つの部分に分かれています。中央部分のピクセルは 1000px に固定されています。残りの 2 つの部分の幅を設定するにはどうすればよいですか。 _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:37:00

オリジナル

2596 人が閲覧しました

モニターの解像度が一貫していないため、中央の 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>

ログイン後にコピー

ごめんなさい、左右の幅を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>

ログイン後にコピー

ごめんなさい、左右の幅を50％に変更してください。

真ん中の部分が1000pxの場合は大丈夫ですが、500pxや800pxに変更すると中央に配置されなくなる場合があります

何か良い解決策はありますか？中央部分が 1000 ピクセルの場合は問題ありませんが、500 ピクセルや 800 ピクセルに変更すると中央に配置されなくなる場合があります。何か良い解決策はありますか? 右: 50%。 margin-right: -500px; これらの 2 つの属性は、ブラウザ内で中央の div を 800 に変更してから、対応する margin-right: -400px; に変更する必要があります。完全に適応させたい場合は、 width:80%; right: 50%; margin-right: -40%; のように変更します。