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. インストール1. MySQLをダウンロードするダウンロードアドレス: リンクアドレスブラウザで...
MySQL sql_modeの適切な設定sql_mode は見落とされやすい変数です。デフォルト値は...
1. 時間差関数(TIMESTAMPDIFF、DATEDIFF) MySQLを使用して時間差を計算...
問題の説明フロントエンドリモート検索やファジークエリと呼ばれる種類のクエリがあります。 Ele.me...
2 年生から、これらのインストールと設定の仕方を尋ねられました。簡単なチュートリアルを作成し、ここ...
1 hupからイメージを取得する docker プル nginx 2 マウントするディレクトリを作成...
<br />著者はかつてWebデザインの初心者でしたが、継続的な探求と実践を通じて、今で...
1 要件の概要MySQL5.6本番データベースの複数のテーブルのデータは、Oracle11gデータウ...
CSS変数の知識を使って、追加したコードとコメントを直接投稿します <!DOCTYPE htm...
開発中に、非常に単純なテキストバブル効果に遭遇しました。これは、おおよそ次のようになります。 うーん...
今日は、初心者の次のような質問に答えます。学ぶ勇気さえあれば、自分のウェブサイトを構築するのは簡単で...
1. 仮想マシンに共有フォルダを設定します。 1. 処理する仮想マシンを選択し、右クリックして設定...
WeChatアプレットのログインインターフェースは参考までに実装されています。具体的な内容は次のとお...
ssh-secure シェルは、安全なリモート ログインを提供します。組み込みシステムを開発し、Li...
この記事では、カルーセルマップの特殊効果を実現するためのJavaScriptの具体的なコードを参考ま...