ホームページ >ウェブフロントエンド >htmlチュートリアル >ページは左、中央、右の 3 つの部分に分かれています。中央部分のピクセルは 1000px に固定されています。残りの 2 つの部分の幅を設定するにはどうすればよいですか。 _html/css_WEB-ITnose
ページは左、中央、右の 3 つの部分に分かれています。中央部分のピクセルは 1000px に固定されています。残りの 2 つの部分の幅を設定するにはどうすればよいですか。 _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:37:002615ブラウズ
モニターの解像度が一貫していないため、中央の div の幅を固定する必要があります。残りの 2 つの辺の幅を設定するにはどうすればよいですか?
c711d206e928b74c34682e11db4fd03816b28748ea4df4d9c2150843fecfba68c7dc1163b431446906e05033c50fb91616b28748ea4df4d9c2150843fecfba68
2657894e7719e9a9aa2663747a449ce216b28748ea4df4d9c2150843fecfba68
返信考察（解決策）
<!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%; のように変更します。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。