div がコンテンツをカバーしているがカバーしていない問題を解決する方法?_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

div がコンテンツをカバーしているがカバーしていない問題を解決する方法?_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:57 AM

divコンテンツカバー解決する

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}

上の図またはブラウザのテストケースからわかるように、「.bb」はDIV ボックスのフローティングオーバーレイ「.cc」は DIV ボックスに対応しますが、内容は対象外です。これは、「.bb」は DIV ボックスに対応し、float を使用しますが、「.cc」は同レベルの DIV ボックスに対応し、float を使用しないためです。 1 つは float を使用し、もう 1 つは DIV が「プレーン」上に存在しないようにし、コンテンツはカバーされず、DIV のみがカバーされます。

解決策:

1. float を使用せず、.bb 内の float を削除します。効果は次のとおりです

2. float を使用し、float:left を .cc に追加します。効果は次のとおりです

3 、float フローティングを使用しない DIV のマージンスタイルを設定します。 margin:100px を .cc に追加すると、効果は次のようになります。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。