1. フロート: 主な目的は、テキストを画像の周囲に折り返す効果を実現することです。 また、複数列レイアウトを作成する最も簡単な方法にもなりました。 <画像ソース="" /> <p>テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ</p> 【1】テキスト折り返し画像 P {余白: 0; 境界線: 実線 1px;} 画像 {float: 左;} 【2】複数列レイアウトを作成する P {余白: 0; 境界線: 実線 1px; 幅: 200px; フロート: 左;} 画像 {float: 左;} 2. フローティング要素はドキュメント フローの外側にあり、親要素はそれを囲まないためそれを見ることができません。そのため、子要素には高さがありますが、親要素は支えられず、これは望ましい状態ではありません。 解決策は3つあります。状況に応じて適宜適用してください。 <セクション> <画像ソース=" /> <p>これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。</p> </セクション> <footer>これが底です。これが底です。これが底です。これが底です。これが底です。これが底です。これが底です。これが底です。</footer> セクション、フッター {border: solid 1px;} 画像 {float: 左;} 【1】親要素にoverflow: hiddenを追加し、親要素がフローティング要素を囲むようにする この宣言の本当の目的は、親要素が大きすぎるコンテンツによって引き伸ばされるのを防ぐことです。overflow: hidden を適用した後も、親要素は設定された幅を維持し、大きすぎる子コンテンツはコンテナーによって切り取られます。 さらに、overflow: hidden には、親要素にフロートされた子要素を確実に含めることができるという別の効果もあります。 ドロップダウン メニューを使用する最上位の要素では使用できません。そうしないと、子要素としてのドロップダウン メニューが表示されません。 【2】親要素も同時にフロートし、幅はブラウザ幅と同じ100%にし、フッターはフロートをクリアしてフッターがセクションの横に圧迫されないようにする セクション {border: solid 1px; float: left; width:100%} フッター {border: solid 1px; clear: left} 画像 {float: 左;} 余白によって自動的に中央に配置される要素には使用できません。そうしないと、中央に配置されなくなります。 【3】非浮遊クリア要素(疑似要素)を追加する .clearfix:後{ コンテンツ: ""; 表示: ブロック; 高さ: 0 可視性: 非表示; クリア:両方 } 3. 親要素がない場合のクリア方法(グループとしてimg p、親要素なし) <セクション> <画像ソース=" /> <p class="clearfix">テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ</p> <画像ソース=" /> <p class="clearfix">テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ</p> <画像ソース=" /> <p class="clearfix">テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ テキスト コンテンツ 段落コンテンツ</p> </セクション> .clearfix:後{ コンテンツ: ""; 表示: ブロック; 高さ: 0 可視性: 非表示; クリア:両方 } 以上がこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に少しでも役立てば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: サーバーストレステストの概念と方法 (TPS/同時実行性)
>>: Chromeブラウザの自動パスワード保存プロンプト機能を無効にする方法
1. Web標準の意味を理解する - なぜWeb標準を採用するのか***** コンテンツとスタイル...
目次1. はじめに2.これを理解する3. これは誰ですか? 4.矢印関数はさらに読む要約する1. は...
1. docker.serviceファイルを編集する: : vi /usr/lib/systemd/...
目次1. 概要1.1 querySelector() と querySelectorAll() の使...
最近、ブルートフォース攻撃によるサーバのクラッキングが頻発しています。侵入行為を大まかに分析し、よく...
この記事では、ウィンドウ表示効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
目次方法1: 関数を直接呼び出す方法2: provide / inject (静的更新) を使用する...
一緒に学びましょう1. 伝統的な方法コードをコピーコードは次のとおりです。 <object c...
バックアップがあれば、非常に簡単です。最新のバックアップ データを生成し、mysqlbinlog を...
CSS レイアウトを使用して WEB 標準に準拠した Web ページを作成することは、jb51.ne...
cmdにnet start mysqlと入力すると、プロンプトが表示されます: サービス名が無効です...
1. 複数の国境[1]背景: ボックスシャドウ、アウトライン使用シナリオの多様性を考慮すると、複数の...
ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...
成果を達成する コードhtml <div class="css-slideshow&...
Linux システムを使用したことがある友人なら、 catコマンドを使用したことがあるはずです。もち...