div 適応幅に問題があります。助けてください。 _html/css_WEB-ITnose
在左侧做了一个可以自动伸缩的菜单栏，想让菜单栏展开时，完全展开右面带地图的div，而不是被左面的菜单遮住一部分，该怎么解决？
这是菜单展开的图：搜索
这是菜单隐藏的图：
这是body:
これはスタイルシートです:
#common_box{
width:100%;
left:0;
border: 1px #789 ; を使用してusing use through through through through out through out through out through through through ' s ' ‐ ‐ ‐‐ ‐‐ ‐ border:1px z-index:99
}
#cli_on{
幅:10ピクセル;
フロート:右;
テキスト整列: センター;
フォントサイズ: 24ピクセル; #f00;
}
{
位置: 固定;
左: 0px;
高さ:
高さ: 650px ; これは伸縮メニューの js です。
var common_box.getElementbyid（ "Common_box"）; timer = setInterval(slideright, 10); timer = setInterval(slideleft, 10); if (r_len } r）;このウェブサイトの。
ディスカッションへの返信 (解決策)
ページのレイアウトが間違っています。position:fixed を使用していることがわかります。表示位置を制御する場合、上書きの問題が発生するのは明らかです。
これを次のように処理できます:
左側のピースには位置決めを使用し、右側のピースには位置決めを使用せず、左側の距離を制御するために margin-left を使用します
変更するとき、同時に右側の margin-left の値を変更するだけです。
こんなことを言っていますが、理解できますか？
mydiv{ margin-top:40px; background-color:#eee; height:650px; margin-left:280px;}
window.onload = function () { var common_box = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var mapDiv = document.getElementById("mapDiv"); //zheli var flag = true, r_len = 0, timer = null; cli_on.onclick = function () { if (flag) { r_len = 0; timer = setInterval(slideright, 10); } else { r_len = -270; timer = setInterval(slideleft, 10); } } function slideright() { if (r_len <= -270) { flag = !flag; cli_on.innerHTML = ""; clearInterval(timer); return false; } else { r_len -= 5; common_box.style.left = r_len + "px"; mapDiv.style.marginLeft = 270 + r_len + "px"; //zheli } } function slideleft() { if (r_len >= 0) { clearInterval(timer); flag = !flag; cli_on.innerHTML = ""; return false; } else { r_len += 5; common_box.style.left = r_len + "px"; mapDiv.style.marginLeft = 270 + r_len + "px"; //zheli } }}ただし、一部のエフェクトでは、HTML 部分のレイアウトも非常に重要です。最初にレイアウトを考えてから、JS と CSS を記述するのが簡単になります。
divの幅を変更する必要があるような気がします。メニューとマップを左右に移動するには、左などを使用します。これらは以前に描画されているため、左または右に移動すると、メニュー自体の一部が覆われるか (この効果は左側のメニューにのみ必要です)、初期ロードのいずれかになります。画面が小さすぎるため、幅の変更に動的に適応できません (マップを左に移動すると、右側の新しい部分が自動的に塗りつぶされません)。
したがって、タイマーイベントで両側の div の幅を変更し、幅の変更に適応するように div のコンテンツを補充することをお勧めします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style>#common_box{ width:15%; height :100%; position:fixed; left:0; top:40px; border:1px solid #789; background:#fff; z-index:99; float:left; padding:0; } #cli_on{ width:10px; height:100%; float:right; cursor:pointer; background:#ccc; text-align:center; line-height:180px; font-size:24px; color:#f00; } .mydiv { position:fixed; top:40px; right:0px; width: 85%; height:650px; float: right; padding:0; }</style><script type="text/javascript"> //左侧弹出菜单 window.onload = function () { var common_box = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var mapDiv = document.getElementById("mapDiv"); var flag = true, r_len = 0, timer = null; var mapDiv_width = mapDiv.clientWidth; var common_box_width = common_box.clientWidth; var body_client_width = mapDiv.clientWidth + common_box.clientWidth; cli_on.onclick = function () { if (flag) { r_len = common_box_width; timer = setInterval(slideright, 10); } else { r_len = 0; timer = setInterval(slideleft, 10); } } function slideright() { if (r_len <= 10) { flag = !flag; common_box.style.width = 10 + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; clearInterval(timer); return false; } else { r_len -= 5; common_box.style.width = r_len + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; mapDiv.innerHTML = "地图"; } } function slideleft() { if (r_len >= common_box_width) { clearInterval(timer); flag = !flag; common_box.style.width = common_box.clientWidth + "px"; mapDiv.style.width = mapDiv_width + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; return false; } else { r_len += 5; common_box.style.width = r_len + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; mapDiv.innerHTML = "地图"; } } }</script><body> <div> <div id="common_box" style="background-color:yellow; overflow: hidden;"> <div id="cli_on">菜单栏</div> </div> <div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div> </div></body></html>div の幅を変更する必要があるような気がします。メニューとマップを左右に移動するには、左などを使用します。これらは以前に描画されているため、左または右に移動すると、メニュー自体の一部が覆われるか (この効果は左側のメニューにのみ必要です)、初期ロードのいずれかになります。画面が小さすぎるため、幅の変更に動的に適応できません (マップを左に移動すると、右側の新しい部分が自動的に塗りつぶされません)。
したがって、タイマーイベントで両側の div の幅を変更し、幅の変更に適応するように div のコンテンツを再充填することをお勧めします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style>#common_box{ width:15%; height :100%; position:fixed; left:0; top:40px; border:1px solid #789; background:#fff; z-index:99; float:left; padding:0; } #cli_on{ width:10px; height:100%; float:right; cursor:pointer; background:#ccc; text-align:center; line-height:180px; font-size:24px; color:#f00; } .mydiv { position:fixed; top:40px; right:0px; width: 85%; height:650px; float: right; padding:0; }</style><script type="text/javascript"> //左侧弹出菜单 window.onload = function () { var common_box = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var mapDiv = document.getElementById("mapDiv"); var flag = true, r_len = 0, timer = null; var mapDiv_width = mapDiv.clientWidth; var common_box_width = common_box.clientWidth; var body_client_width = mapDiv.clientWidth + common_box.clientWidth; cli_on.onclick = function () { if (flag) { r_len = common_box_width; timer = setInterval(slideright, 10); } else { r_len = 0; timer = setInterval(slideleft, 10); } } function slideright() { if (r_len <= 10) { flag = !flag; common_box.style.width = 10 + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; clearInterval(timer); return false; } else { r_len -= 5; common_box.style.width = r_len + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; mapDiv.innerHTML = "地图"; } } function slideleft() { if (r_len >= common_box_width) { clearInterval(timer); flag = !flag; common_box.style.width = common_box.clientWidth + "px"; mapDiv.style.width = mapDiv_width + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; return false; } else { r_len += 5; common_box.style.width = r_len + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; mapDiv.innerHTML = "地图"; } } }</script><body> <div> <div id="common_box" style="background-color:yellow; overflow: hidden;"> <div id="cli_on">菜单栏</div> </div> <div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div> </div></body></html> さて、あなたの助けに従ってコードを修正して実行しましたが、左側のメニューバーは右側の地図を覆いませんが、メニューバーが非表示になると右側の地図は消えます。右側の空白の 15% いいえ メソッドは自動的に埋められます
div の幅を変更する必要があるように感じます。メニューとマップを左右に移動するには、左などを使用します。これらは以前に描画されているため、左または右に移動すると、メニュー自体の一部が覆われるか (この効果は左側のメニューにのみ必要です)、初期ロードのいずれかになります。画面が小さすぎるため、幅の変更に動的に適応できません (マップを左に移動すると、右側の新しい部分が自動的に塗りつぶされません)。
したがって、タイマーイベントで両側の div の幅を変更し、幅の変更に適応するように div のコンテンツを補充することをお勧めします。
そうですね、あなたの助けに従ってコードを修正して実行しました。確かに、左側のメニューバーは右側のマップをカバーしませんが、メニューバーが非表示になると、右側のマップは15％空白のままになります。右側は自動的に塗りつぶすことはできません
私が作成したエフェクトでは、地図を自動的に適応させるために、
mapDiv.innerHTML = "map" を手動で再描画する必要があります。画面が切り替わります。
mydiv{ margin-top:40px; background-color:#eee; height:650px; margin-left:280px;}
window.onload = function () { var common_box = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var mapDiv = document.getElementById("mapDiv"); //zheli var flag = true, r_len = 0, timer = null; cli_on.onclick = function () { if (flag) { r_len = 0; timer = setInterval(slideright, 10); } else { r_len = -270; timer = setInterval(slideleft, 10); } } function slideright() { if (r_len <= -270) { flag = !flag; cli_on.innerHTML = ""; clearInterval(timer); return false; } else { r_len -= 5; common_box.style.left = r_len + "px"; mapDiv.style.marginLeft = 270 + r_len + "px"; //zheli } } function slideleft() { if (r_len >= 0) { clearInterval(timer); flag = !flag; cli_on.innerHTML = ""; return false; } else { r_len += 5; common_box.style.left = r_len + "px"; mapDiv.style.marginLeft = 270 + r_len + "px"; //zheli } }}あなたのものに基づいて、少し変更しました。これはあなたが望む効果ですか?互換性についてはテストされていません。
ただし、一部のエフェクトでは、HTML 部分のレイアウトも非常に重要です。最初にレイアウトを考えてから、JS と CSS を記述するのが簡単になります。
試してみたらうまくいきました！位置を直接固定するためにposition:fixed;を使用するのは悪いですか?
divの幅を変更する必要があるような気がします。メニューとマップを左右に移動するには、左などを使用します。これらは以前に描画されているため、左または右に移動すると、メニュー自体の一部が覆われるか (この効果は左側のメニューにのみ必要です)、初期ロードのいずれかになります。画面が小さすぎるため、幅の変更に動的に適応できません (マップを左に移動すると、右側の新しい部分が自動的に塗りつぶされません)。
したがって、タイマーイベントで両側の div の幅を変更し、幅の変更に適応するように div のコンテンツを補充することをお勧めします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style>#common_box{ width:15%; height :100%; position:fixed; left:0; top:40px; border:1px solid #789; background:#fff; z-index:99; float:left; padding:0; } #cli_on{ width:10px; height:100%; float:right; cursor:pointer; background:#ccc; text-align:center; line-height:180px; font-size:24px; color:#f00; } .mydiv { position:fixed; top:40px; right:0px; width: 85%; height:650px; float: right; padding:0; }</style><script type="text/javascript"> //左侧弹出菜单 window.onload = function () { var common_box = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var mapDiv = document.getElementById("mapDiv"); var flag = true, r_len = 0, timer = null; var mapDiv_width = mapDiv.clientWidth; var common_box_width = common_box.clientWidth; var body_client_width = mapDiv.clientWidth + common_box.clientWidth; cli_on.onclick = function () { if (flag) { r_len = common_box_width; timer = setInterval(slideright, 10); } else { r_len = 0; timer = setInterval(slideleft, 10); } } function slideright() { if (r_len <= 10) { flag = !flag; common_box.style.width = 10 + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; clearInterval(timer); return false; } else { r_len -= 5; common_box.style.width = r_len + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; mapDiv.innerHTML = "地图"; } } function slideleft() { if (r_len >= common_box_width) { clearInterval(timer); flag = !flag; common_box.style.width = common_box.clientWidth + "px"; mapDiv.style.width = mapDiv_width + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; return false; } else { r_len += 5; common_box.style.width = r_len + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; mapDiv.innerHTML = "地图"; } } }</script><body> <div> <div id="common_box" style="background-color:yellow; overflow: hidden;"> <div id="cli_on">菜单栏</div> </div> <div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div> </div></body></html>さて、あなたの助けに従ってコードを修正して実行しました。確かに、左側のメニューバーは右側の地図を覆いませんが、メニューバーが非表示になると、右側の地図は消えます。右側の空白スペースの 15% いいえ、メソッドは自動的に埋められます
私が作成したエフェクトでは、マップを手動で再描画する必要があります mapDiv.innerHTML = "map"; をマップの読み込みコードに置き換える必要があります。 、マップが画面の変化に自動的に適応できるようにします。
マップはmapDivにのみロードされます。完全にロードしたい場合は、divの幅を変更するだけです。
位置決めやフローティングのものはできるだけ使用しないほうがよいと思います。多すぎると、後から機能を追加したり、スタイルを変更したりするときに困難になります。
もちろん、すべてのレイアウトで float とposition を使用しない限り、それを使用する必要がある場合もあります。
それは個人的な習慣でもあります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7688
15
1639
14
1393
52
1287
25
1229
29
Windows 11 でコンテンツの適応型明るさを設定する方法
Apr 14, 2023 pm 12:37 PM
明るさの調整は、表示されているコンテンツや照明条件に基づいて画面の明るさレベルを調整する Windows 11 コンピューターの機能です。一部のユーザーはまだ Windows 11 の新しいインターフェイスに慣れていないため、明るさの自動調整機能を簡単に見つけることができず、明るさの自動調整機能が Windows 11 にないという人もいます。そのため、このチュートリアルですべてを解決します。たとえば、YouTube ビデオを視聴していて、ビデオに突然暗いシーンが表示された場合、明るさの調整により画面が明るくなり、コントラスト レベルが上がります。これは、コンピュータ、スマートフォン、またはデバイスが周囲の照明に基づいて明るさレベルを調整できるようにする画面設定である自動明るさとは異なります。フロントカメラには特別なものがあります
CSSを使用してdivの角が欠けていることを認識する方法
Jan 30, 2023 am 09:23 AM
div の角が欠けていることを認識するための CSS メソッド: 1. HTML サンプル ファイルを作成し、div を定義します; 2. div の幅と高さの背景色を設定します; 3. 削除する必要がある div に疑似クラスを追加します隅に配置し、擬似クラスを背景色と同じ色を使用するように設定し、45 度回転して、削除する必要がある隅に配置します。
Vue を使用してアダプティブ モバイル インターフェイスを構築するにはどうすればよいですか?
Jun 27, 2023 am 11:05 AM
モバイル インターネットの普及に伴い、モバイル エクスペリエンスを考慮する必要がある Web サイトやアプリケーションがますます増えています。人気のあるフロントエンド フレームワークとして、Vue には応答性の高いレイアウトと適応機能があり、適応モバイル インターフェイスの構築に役立ちます。この記事では、Vue を使用してアダプティブ モバイル インターフェイスを構築する方法を紹介します。単位として px の代わりに rem を使用したり、モバイル インターフェイスの単位として px を使用したりすると、さまざまなデバイスで表示効果に一貫性がなくなる可能性があります。したがって、単位として px ではなく rem を使用することをお勧めします。レムは相対的なものです
CSS ビューポート単位 vmin および vw を使用してアダプティブ画像サイズを実装する方法
Sep 13, 2023 am 08:18 AM
CSSViewport ユニット vmin および vw を使用して適応型画像サイズを実装する方法 Web デザインでは、画像を画面サイズに適応させる必要がある状況によく遭遇します。この目標を達成するために、CSS はビューポート ユニットという強力なユニットを提供します。このうち、vmin はビューポート幅の小さい方の割合を表し、vw はビューポート幅の割合を表します。したがって、これら 2 つのユニットを使用して、適応型画像サイズの効果を実現できます。具体的には以下でご紹介します
ChatGPT APIに基づくワードマーキング翻訳ブラウザスクリプトの実装
May 01, 2023 pm 03:28 PM
はじめに 最近 GitHub に ChatGPTAPI をベースにしたブラウザスクリプト openai-translator が登場しました 短期間でスターが 12k に達しました 翻訳だけでなく磨きや要約機能もサポートしています ブラウザプラグに加えて-ins, tauri パッケージも使用します。デスクトップ クライアントをお持ちの場合は、tauri が Rust 部分を使用するという事実を除けば、ブラウザ部分の実装はまだ比較的簡単です。今日は手動で実装します。 openAI によって提供されるインターフェイス。たとえば、次のコードをコピーし、ブラウザ コンソールでリクエストを開始して変換を完了できます。 //Example constOPENAI_API_KEY="s
iframeとdivの違いは何ですか
Aug 28, 2023 am 11:46 AM
iframe と div の違いは、iframe は主に外部コンテンツを導入するために使用され、他の Web サイトからコンテンツをロードしたり、Web ページを複数の領域に分割したりできます。各領域には独自の独立した閲覧コンテキストがあり、div は主に分割および分割するために使用されます。コンテンツを整理し、レイアウトとスタイルを制御するためのブロック。
divボックスモデルとは何ですか
Oct 09, 2023 pm 05:15 PM
div ボックス モデルは、Web ページのレイアウトに使用されるモデルです。Web ページ内の要素を長方形のボックスとして扱います。このモデルには、コンテンツ領域、パディング、ボーダー、マージンの 4 つの部分が含まれています。 div ボックス モデルの利点は、Web ページのレイアウトと要素間の間隔を簡単に制御できることであり、コンテンツ領域、内側の余白、境界線、外側の余白のサイズを調整することで、さまざまなレイアウト効果を実現できます。ボックス モデルには、CSS と JavaScript を通じてボックスのスタイルと動作を動的に変更できるいくつかのプロパティとメソッドも用意されています。
vue は適応可能ですか?
Dec 30, 2022 pm 03:25 PM
Vue は自己適応を実現できます。自己適応を実現する方法は次のとおりです: 1. 「npm install」または「yarn add」コマンドを使用して「scale-box」コンポーネントをインストールし、「scale-box」を使用して適応スケーリングを実現します。 ; 2. 自己適応を実現するためにデバイスのピクセル比を設定します; 3. JS を通じてズーム属性を設定し、自己適応を達成するためにズーム率を調整します。
