div がコンテンツをカバーしているがカバーしていない問題を解決する方法?_html/css_WEB-ITnose
1. トップダウン構造の div レイアウトでは、div が div をカバーする可能性がありますが、コンテンツはカバーされません。例を見てみましょう
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>DIV与DIV覆盖</title>
5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6: <style>
7: .boxa,.boxb{ margin:0 auto; width:400px;} 8: .boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00} 9: .boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00} 10: .boxb{ border:1px solid #000; height:40px; background:#999}11: </style>
12: </head>
13: <body>
14: <div class="boxa">
15: <div class="boxa-l">内容左</div>
16: <div class="boxa-r">内容右</div>
17: </div>
18: <div class="boxb">boxb盒子里的内容</div>
19: </body>
通常、「.boxa」と「.boxb」をレイアウトする必要があります上の図から、ブラウザーで見られる効果は、2 つのボックス内のコンテンツがトップダウン構造の効果を実現していますが、DIV ".boxb" は ".boxa" の下で実行されていることがわかります。 、ただし、コンテンツは上書きされず、DIV のカバレッジ現象のみが発生します。
この理由は、最初の大きなボックス内の子が float 属性を使用して float しているため、「.boxa」が開かれておらず、同じレベルにある「.boxb」ボックスが「.boxa」とは異なるためです。しかし、「.boxa」には高さがありません。「.boxa」の子は浮動小数点であり、「.boxb」ボックスは依然として「.boxa」に高さがないと考えます。 .boxb" DIV ボックスは、".boxa" サブレベル DIV ボックスの下で動作し、重複現象を形成します。
この問題を解決するには 3 つの方法があります:
1. height 属性を boxa に追加します。 height の値は、baxa-l の高さ以上でなければなりません
20: </html>
2 . フロートをクリアします
".boxa" ボックス
1: <div class="boxa" style="height:81px;">
1: //css
2: .clear{ clear:both}3:
4: //修改boxa
5: <div class="boxa">
6: <div class="boxa-l">内容左</div>
7: <div class="boxa-r">内容右</div>
8: <div class="clear"></div>
または、boxb の float をクリアします
9: </div>
3. 「.boxa」に overflow:hidden を追加します。
RREE RREE RREE RREE
2. 2 つの隣接する DIV の重複カバレッジ
この問題は通常、2 つの隣接する DIV の一方がフローティングを使用し、もう一方がフローティングを使用しないという事実によって発生し、これにより 2 つの DIV が重複します。
1: <div class="boxb" style="clear:both">boxb盒子里的内容</div>
1: <div class="boxa" style="overflow:hidden">
2: <div class="boxa-l">内容左</div>
3: <div class="boxa-r">内容右</div>
4: </div>
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>DIV与DIV覆盖</title>
5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6: <style>
7: .bb{ float:left; border:1px solid #333; background:#FFF;height:50px;} 8: .cc{ border:1px solid #F00;background:#CCC; height:80px}解決策:
1. float を使用せず、.bb 内の float を削除します。効果は次のとおりです
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7488
15
1377
52
77
11
19
40
Win11システムに中国語言語パックをインストールできない問題の解決策
Mar 09, 2024 am 09:48 AM
Win11 システムに中国語言語パックをインストールできない問題の解決策 Windows 11 システムの発売に伴い、多くのユーザーは新しい機能やインターフェイスを体験するためにオペレーティング システムをアップグレードし始めました。ただし、一部のユーザーは、アップグレード後に中国語の言語パックをインストールできず、エクスペリエンスに問題が発生したことに気づきました。この記事では、Win11 システムに中国語言語パックをインストールできない理由について説明し、ユーザーがこの問題を解決するのに役立ついくつかの解決策を提供します。原因分析 まず、Win11 システムの機能不全を分析しましょう。
Black Shark携帯電話の電源が入らない問題を解決する方法を教える5つのヒント!
Mar 24, 2024 pm 12:27 PM
スマートフォン技術が発展し続けるにつれて、携帯電話は私たちの日常生活においてますます重要な役割を果たしています。 Black Shark フォンは、ゲーム パフォーマンスに重点を置いたフラッグシップ フォンとして、プレイヤーから高い支持を得ています。ただし、場合によっては、Black Shark 携帯電話の電源が入らないという状況にも直面するため、この問題を解決するために何らかの措置を講じる必要があります。次に、Black Shark 携帯電話の電源が入らない問題を解決する方法を説明する 5 つのヒントを共有しましょう: ステップ 1: バッテリー残量を確認する まず、Black Shark 携帯電話に十分な電力があることを確認します。携帯電話のバッテリーが消耗している可能性があります
このデバイスにドライバーをロードできません。解決するにはどうすればよいですか? (個人的にテスト済みで有効です)
Mar 14, 2024 pm 09:00 PM
コンピューターがドライバーを読み込めない場合、デバイスが正しく動作しないか、コンピューターと正しく対話できない可能性があることは誰もが知っています。では、このデバイスにドライバーをロードできないことを示すプロンプト ボックスがコンピューターに表示された場合、問題を解決するにはどうすればよいでしょうか?以下のエディタでは、問題を簡単に解決する 2 つの方法を説明します。このデバイスにドライバーをロードできません 解決策 1. スタート メニューで「カーネル分離」を検索します。 2. メモリの整合性をオフにします。上記のメッセージには、「メモリの整合性がオフになっています。デバイスは脆弱である可能性があります。」というメッセージが表示されます。戻るボタンをクリックして無視してください。使用には影響しません。 3. マシンを再起動すると、問題が解決することがあります。
小紅書で公開するときに写真が自動的に保存される問題を解決するにはどうすればよいですか?投稿時に自動保存された画像はどこにありますか？
Mar 22, 2024 am 08:06 AM
ソーシャルメディアの継続的な発展に伴い、Xiaohongshu はますます多くの若者が自分たちの生活を共有し、美しいものを発見するためのプラットフォームとなっています。多くのユーザーは、画像を投稿する際の自動保存の問題に悩まされています。では、この問題をどうやって解決すればよいでしょうか? 1.小紅書で公開するときに写真が自動的に保存される問題を解決するにはどうすればよいですか? 1. キャッシュをクリアする まず、Xiaohongshu のキャッシュ データをクリアしてみます。手順は次のとおりです: (1) 小紅書を開いて右下隅の「マイ」ボタンをクリックします。 (2) 個人センター ページで「設定」を見つけてクリックします。 (3) 下にスクロールして「」を見つけます。 「キャッシュをクリア」オプションを選択し、「OK」をクリックします。キャッシュをクリアした後、Xiaohongshu を再起動し、写真を投稿して、自動保存の問題が解決されるかどうかを確認します。 2. 小紅書バージョンを更新して、小紅書が正しく動作することを確認します。
デフォルトゲートウェイが自動的に消える問題の解決方法
Feb 24, 2024 pm 04:18 PM
デフォルトゲートウェイが自動的に消えてしまう問題の解決方法 現代社会において、インターネットは人々の生活に欠かせないものとなっています。仕事でも娯楽でも、さまざまなタスクを完了するには安定したネットワーク接続が必要です。デフォルト ゲートウェイは、ローカル ネットワークを外部インターネットに接続する重要な要素の 1 つです。しかし、場合によってはデフォルトゲートウェイが自動的に消えてしまい、インターネットにアクセスできなくなるという問題が発生することがあります。では、デフォルトゲートウェイがなくなってしまった場合、どうやってこの問題を解決すればいいのでしょうか？まず、デフォルト ゲートウェイの概念を明確にする必要があります。デフォルトゲートウェイはネットワークルートです
Huawei ブラウザがこの Web ページにアクセスしなくなった問題を解決する方法
Feb 26, 2024 pm 01:28 PM
Huawei ブラウザがこの Web ページにアクセスできなくなった問題を解決するにはどうすればよいですか? Huawei モバイルブラウザを使用して特定の Web サイトにアクセスすると、アクセスが禁止されていることを示すプロンプトが表示され、ユーザーが関連コンテンツを正常に閲覧できなくなる場合があります。これはユーザーにとって非常に不便です。では、Huawei モバイル ブラウザ Web サイトへのアクセスが禁止されている状況に遭遇した場合はどうすればよいでしょうか?以下のエディターは、Huawei ブラウザ Web サイトへのアクセスが禁止されている問題の解決策を提供します。 Huawei Browser Web サイトへのアクセスが禁止されている場合の解決策 1. Huawei モバイル ブラウザを開いた後、下の三点アイコンをクリックし、[設定] をクリックします。 2. 設定を入力後、[セキュリティとプライバシー]をクリックします。 3. [セーフ ブラウジング]の右側のスイッチをオフにして、Web サイトのアクセス制限を解除します。以上がファーウェイのブラウザWebサイトへのアクセス禁止に対する解決策です。
Microsoft Edge ブラウザーを 360 ナビゲーションで開くように変更する方法 - 360 ナビゲーションで開くように変更する方法
Mar 04, 2024 pm 01:50 PM
Microsoft Edge ブラウザーを開くページを 360 ナビゲーションに変更するにはどうすればよいですか? それは実際には非常に簡単なので、ここで Microsoft Edge ブラウザーを開くページを 360 ナビゲーションに変更する方法を共有します。見てください。皆さんのお役に立てれば幸いです。 Microsoft Edgeブラウザを開きます。以下のようなページが表示されます。右上隅にある三点アイコンをクリックします。 「設定」をクリックします。設定ページの左欄にある「起動時」をクリックします。右の列の図に示されている 3 つの点をクリックし ([新しいタブを開く] をクリックしないでください)、[編集] をクリックして URL を「0」(またはその他の意味のない数字) に変更します。次に、「保存」をクリックします。次に「」を選択します。
Oracle エラー 3114 の解釈: 原因と解決策
Mar 08, 2024 pm 03:42 PM
タイトル: Oracle エラー 3114 の分析: 原因と解決策 Oracle データベースを使用すると、さまざまなエラー コードが頻繁に発生しますが、その中で比較的一般的なのはエラー 3114 です。このエラーには通常、データベース リンクの問題が関係しており、データベースへのアクセス時に例外が発生する可能性があります。この記事では、Oracle エラー 3114 を解釈し、その原因について説明し、エラーを解決するための具体的な方法と関連するコード例を示します。 1. エラー 3114 の定義 Oracle エラー 3114 パス
