css全般小メモ02?? フローティング、クリア（3つの例）_html/css_WEB-ITnose
フローティングとクリアは通常 CSS で使用されますが、これも習得する必要がある知識ポイントです。その使用法を説明するためにいくつかの例を示します。 1. テキストの折り返し効果 2. 複数。 div を並べて表示します 3. フローティングをクリアします (デフォルトの表示)
一. テキストの折り返し効果:
html コードは次のとおりです:
1 <body> 2 3 <style type="text/css"> 4 #big img {float: left;padding: 10px;border: 1px solid red;} 5 #big span {font-size: 24px;font-weight: bold; margin: 0 auto;} 6 </style> 7 <div id="big"> 8 <span>广告浮动效果:</span> 9 <p><img src="..\Desktop\p6.jpg" width="200" alt="p6" />文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>10 </div>11 12 </body>説明: img タグを左に直接フローティングします。そして、テキストで囲まれた画像が表示されます。padding: 10px; の効果は、画像とテキストの間の距離を設定することです。実行中の効果は次のとおりです (画像パスを自分で変更することを忘れないでください)。
2. 複数の div が並べて表示されますHTML コードは次のとおりです:
1 <body> 2 3 <style type="text/css"> 4 #big div {width: 100px;height: 100px;} 5 .div1 {background: red;} 6 .div2 {background: yellow;} 7 .div3 {background: green;} 8 </style> 9 <div id="big">10 <div class="div1">div1</div>11 <div class="div2">div2</div>12 <div class="div3">div3</div>13 </div>14 15 </body>上記のコードは次のように表示されます:
写真からわかるように、3 つの div横に並べて表示するのではなく、縦に表示するのがデフォルトの表示方法です。並べて表示したい場合は、上記のコードに
#big div {width: 100px; height: 100px; float: left;} という文を追加するだけで、表示効果は次のようになります。
3. float をクリアします
次の HTML コードがあります:
1 <body> 2 3 <style type="text/css"> 4 #big div {width: 100px;height: 100px;} 5 .div1 {background: red;float: left;}//注意这里的第一个div是左浮动； 6 .div2 {background: yellow;} 7 .div3 {background: green;} 8 </style> 9 <div id="big">10 <div class="div1">div1</div>11 <div class="div2">div2</div>12 <div class="div3">div3</div>13 </div>14 15 </body>2 番目の例から、float: left が div2 と div3 の両方に設定されている場合、3 つの div は次のようになります。並べて表示されます。上記のコードに注目してください。最初の div はフローティングのままですが、次の 2 つの div はフローティングになっていません。これはどのような効果ですか?下の図に示すように:
図からわかるように、div2 がありません。これはなぜですか? div1 が float left に設定されているため、デフォルトでは div2 が最初の位置から表示されるため、div1 が div2 を覆い、div3 が div2 から表示し続けるので、この結果になります。 では、デフォルトの表示に戻すにはどうすればよいでしょうか。これには、フロートをクリアしてコード .div2 {background: yellow;clear:left;} を変更する必要がありますが、問題ありません。効果は次のとおりです:
div2 が再び表示されます。これは、float をクリアする関数です。名前が示すように、それが何を意味するかはすでにわかっています。それ以上は言わないでください。
以上が 3 つの例です。皆さんのお役に立てば幸いです。ご質問がございましたら、お気軽にご相談ください。
ホット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）
ホットトピック
7569
15
1386
52
87
11
28
107
ユニバーサル PnP モニターのドライバーをダウンロードする方法: 5 つの方法
Apr 21, 2023 pm 08:55 PM
最近 Windows 10 または Windows 11 にアップグレードした場合は、PC にユニバーサル PnP モニター ドライバーをダウンロードする必要がある場合があります。したがって、ユニバーサル PnP モニターについて詳しく説明し、Windows にユニバーサル PnP ドライバーをダウンロードしてインストールする簡単な方法をいくつか説明するチュートリアルを用意しました。 AcerGenericPnP モニター ドライバーなど、ほとんどのモニター ブランドのドライバーをダウンロードする必要がある場合があります。デバイス マネージャーまたはディスプレイ アダプターのプロパティの [モニター] タブでモニターの種類を探していると、汎用 PnP モニターに気づく場合があります。ラップトップとデスクトップの両方のデュアル モニター設定でこの機能が見つかる可能性があります。下
Windows 11でデスクトップの背景の最近の画像履歴をクリアする方法
Apr 14, 2023 pm 01:37 PM
<p>Windows 11 ではシステムの個人設定が改善され、ユーザーが以前に行ったデスクトップの背景の変更の最近の履歴を表示できるようになりました。 Windows システム設定アプリケーションの個人設定セクションに入ると、さまざまなオプションが表示されます。背景の壁紙の変更もその 1 つです。ただし、システムに設定されている背景壁紙の最新の履歴を確認できるようになりました。これを見るのが嫌で、この最近の履歴を消去または削除したい場合は、この記事を読み続けてください。レジストリ エディターを使用してこれを行う方法の詳細を学ぶのに役立ちます。 </p><h2>レジストリ編集の使用方法
小紅書メモを削除する方法
Mar 21, 2024 pm 08:12 PM
小紅書メモを削除するにはどうすればよいですか? メモは小紅書アプリで編集できます。ほとんどのユーザーは小紅書メモの削除方法を知りません。次に、エディターがユーザーに小紅書メモの削除方法に関する写真とテキストを提供します。チュートリアル、興味のあるユーザーが来て、それを受講してください見てください！小紅書使い方チュートリアル 小紅書メモの削除方法 1. まず小紅書アプリを開いてメインページに入り、右下隅の[自分]を選択して特別エリアに入ります; 2. 次に、マイエリアで、表示されているメモページをクリックします下の図で、削除したいメモを選択します; 3. メモページに入り、右上隅の [3 つの点] をクリックします; 4. 最後に、下部に機能バーが展開され、[削除] をクリックして完了します。
小紅書に関する削除されたメモは復元できますか?
Oct 31, 2023 pm 05:36 PM
小紅書から削除されたメモは復元できません。小紅書は知識共有とショッピングのプラットフォームとして、ユーザーにメモを記録し、役立つ情報を収集する機能を提供します。小紅書氏の公式声明によると、削除されたメモは復元できないとのこと。小紅書プラットフォームには、専用のノート回復機能はありません。これは、Xiaohongshu でメモが削除されると、誤って削除されたか、その他の理由であったとしても、プラットフォームから削除されたコンテンツを取得することは通常不可能であることを意味します。特別な状況が発生した場合は、Xiaohongshu のカスタマー サービス チームに連絡して、問題の解決に協力できるかどうかを確認してください。
Windows 11で保護履歴をクリアする方法: 2つの方法
Apr 23, 2023 am 08:04 AM
PC のストレージ容量が不足している場合、すぐに多くのフォルダーを表示してスペースを解放できます。消費量が多いのは Windows Defender の保護履歴ですが、Windows 11 では消去できますか?完全に必要というわけではありませんが、保護履歴を削除すると、システム上のストレージ領域を空けることができます。一部のユーザーにとって、これらのファイルは 20 ～ 25 GB のスペースを占有し、コンピューターのストレージスペースが少ない場合には、これが困難になる可能性があります。そこで、保護履歴とは何か、Windows 11 で保護履歴を消去するすべての方法、および一定時間が経過すると自動的に消去されるように構成する方法を見てみましょう。歴史保存とは何ですか？ M
小紅書に投稿したメモが見つからない場合はどうすればよいですか?送信したばかりのメモが見つからない理由は何ですか?
Mar 21, 2024 pm 09:30 PM
小紅書のユーザーとして、私たちは皆、公開されたノートが突然消えてしまう状況に遭遇したことがありますが、間違いなく混乱し、心配しています。この場合、どうすればよいでしょうか？この記事では、「小紅書が公開したメモが見つからない場合の対処方法」というテーマに焦点を当て、詳細な回答を提供します。 1. 小紅書が発行したメモが紛失した場合はどうすればよいですか?まず、パニックにならないでください。メモがなくなっていることに気づいた場合は、パニックに陥らず、落ち着いて行動することが重要です。これは、プラットフォームのシステム障害または操作エラーが原因である可能性があります。リリース記録の確認も簡単です。小紅書アプリを開き、「自分」→「公開」→「すべての出版物」をクリックするだけで、自分の出版記録を表示できます。ここでは、以前に公開されたノートを簡単に見つけることができます。 3.再投稿。見つかったら
最新のiOS 17システムでiPhoneにApple Notesを接続する方法
Sep 22, 2023 pm 05:01 PM
リンクの追加機能を使用して iPhone で AppleNotes をリンクします。注: iOS17 がインストールされている場合、iPhone 上で Apple Notes 間のリンクを作成することができます。 iPhone でメモ アプリを開きます。次に、リンクを追加するメモを開きます。新しいメモを作成することもできます。画面上の任意の場所をクリックします。メニューが表示されます。右側の矢印をクリックして、「リンクの追加」オプションを表示します。クリックして。ここで、メモの名前または Web ページの URL を入力できます。次に、右上隅の「完了」をクリックすると、追加されたリンクがメモに表示されます。単語にリンクを追加したい場合は、単語をダブルクリックして選択し、「リンクを追加」を選択して、 を押します。
小紅書でノートに商品リンクを追加する方法 小紅書でノートに商品リンクを追加するチュートリアル
Mar 12, 2024 am 10:40 AM
小紅書でメモに商品リンクを追加するにはどうすればよいですか?小紅書アプリでは、ユーザーはさまざまなコンテンツを閲覧できるだけでなく、ショッピングもできるため、このアプリにはショッピングのおすすめや良い商品の共有に関するコンテンツがたくさんあります。このアプリでは、ショッピング体験を共有したり、協力してくれる販売者を見つけたり、メモにリンクを追加したりすることもできます。便利なだけでなく、専門家がいくつかの機能を備えているため、多くの人がこのアプリをショッピングに使用したいと考えています。興味深いコンテンツを閲覧して、自分に合った衣料品があるかどうかを確認できます。ノートに商品リンクを追加する方法を見てみましょう! 小紅書ノートに商品リンクを追加する方法 携帯電話のデスクトップでアプリを開きます。アプリのホームページをクリックします
