CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の問題も多数あるため、困難な作業になる可能性があります。その配置には、包含ブロックだけでなく、行ボックス、ブロック ボックス、インライン ボックスも含まれます。この記事には、float プロパティを適用する実施形態の実例といくつかのエラーが含まれています。 ![]() 「フロート」とは何ですか? CSS の特定の要素はブロック要素です。たとえば、段落タグを 2 つ P として配置すると、2 行に配置されます。各要素は 1 行を占めます。1 行で表示したい場合は、インライン属性を使用してページに表示できます。 ページ要素の折り返しプロパティを変更するもう 1 つの効果的な方法は、float を使用することです。典型的な例としては、"float" を使用して画像を左または右に揃えることがあります。以下は、画像と段落を含む単純な HTML コードです。 コードをコピー コードは次のとおりです。<img src="http://lorempixum.com/200/200/" /> <p>Lorem ipsum...</p> これらは新しい行に表示されます。 ![]() 画像の外観を変更するために、画像に CSS コードを追加してみましょう。 コードをコピー コードは次のとおりです。画像 { フロート: 右; マージン: 20px; } この時点で、正しい配置が得られます。 ![]() さらにテキストがある場合、段落は画像の周囲に折り返されます。 ![]() たとえば、画像とテキストを 20 ピクセルインデントする必要があります。このようなコードを記述すると、次のコードは間違っており、動作しません。 コードをコピー コードは次のとおりです。p { マージン: 20px; } こうすると、正しいことになります: コードをコピー コードは次のとおりです。画像 { マージン: 20px; } ![]() それでは、上記の p 段落の 20 ピクセルのインデントがなぜ機能せず、効果的ではないのかと疑問に思うかもしれません。確認するには、スケルトン コードを追加してみましょう。 コードをコピー コードは次のとおりです。p { 境界線: 実線 1px 黒; } 結果はあなたを驚かせるかもしれません: ![]() 境界線がないと (境界線はここでは影響しません。単に理解してもらうためのものです)、画像が段落内に表示されることがわかります。したがって、最初のケースでは margin プロパティは効果がありません。この問題を解決するには、段落pにfloat:leftを使用し、絶対幅を設定します。設定後の効果は次のとおりです。 コードをコピー コードは次のとおりです。画像 { フロート: 右; マージン: 20px; } p { フロート: 左; 幅: 220ピクセル; マージン: 20px; } ![]() 奇妙なルール「フロート」 次に、「float」ルールを使用して float オブジェクトを変換する、より複雑な方法に進みましょう。サムネイルを作成するときに必要になる場合があります。例えば: コードをコピー コードは次のとおりです。<ul> <li><img src="http://placehold.it/100x100&text=1"/></li> <li><img src="http://placehold.it/100x150&text=2"/></li> <li><img src="http://placehold.it/100x100&text=3"/></li> <li><img src="http://placehold.it/100x100&text=4"/></li> <li><img src="http://placehold.it/100x100&text=5"/></li> <li><img src="http://placehold.it/100x150&text=6"/></li> <li><img src="http://placehold.it/100x100&text=7"/></li> </ul> デフォルトでは、各 li 項目はそれぞれ 1 行を占めます。すべての「float: left」を配置すると、画像は改行で整列します。 コードをコピー コードは次のとおりです。李 { フロート: 左; マージン: 4px; } ![]() しかし、画像の高さが異なる場合はどうなるでしょうか? ![]() リスト内の要素に表示属性を追加すると、次の図に示すように、効果はより良くなります。 コードをコピー コードは次のとおりです。李 { 表示: インライン; } ![]() 次に垂直方向に揃えてみましょう。 コードをコピー コードは次のとおりです。画像 { 垂直方向の位置合わせ: 上; } ![]() より高い位置にある画像の場合、他のすべての画像が前の画像を囲むことになるので注意してください。例: ![]() もう 1 つの例は、要素の順序を変更することです。項目のリストがあります。 コードをコピー コードは次のとおりです。<UL> <LI> <img src="http://placehold.it/100x100&text=1"/> </li> <li> <img src="http://placehold.it/100x100&text=2"/> </li> <LI> <img src="http://placehold.it/100x100&text=3"/> </li> <li> <img src="http://placehold.it/100x100&text=4"/> </li> <LI> <img src="http://placehold.it/100x100&text=5"/> </li> <li> <img src="http://placehold.it/100x100&text=6"/> </li> </ul> 逆の順序にしたい場合は、「float: left」の代わりに「float: right:」を使用します。HTMLでは、上記のコードのように要素の順序を変更しません。CSSを使用して操作します。 ![]() 「フロート」を使用すると、ページ上の項目をグループ化するのに便利ですが、次のコンテンツ (テキストまたはブロック) も変更されるという大きな問題に直面します。たとえば、次のような画像のセットがあります。 ![]() 次のテキストがブロック全体に流れ始めます。 ![]() これを回避するには、「clear」プロパティを使用する必要があります。これを2番目の画像に適用すると次のようになります。 コードをコピー コードは次のとおりです。ul li:n番目の子(2) { クリア:左; } 結果は次のとおりです: ![]() この場合、残りの画像は引き続き「float: left」を継承します。それに応じて、テキストは歪んで表示されます。 ![]() 段落には clear:both を使用する必要があります。 コードをコピー コードは次のとおりです。p { クリア: 両方; } 私たちの問題の解決策は次のとおりです。 ![]() さて、前の例で、ギャラリーに背景を設定する必要があると想像してみましょう。アイテムが浮かばない場合は、次のようになります。 コードをコピー コードは次のとおりです。ウル { 背景: グレー; } ![]() しかし、リストから「float: left」を追加すると、背景は完全に消えます。 ![]() 最初に高さを UL に設定すると、次のようになります。 コードをコピー コードは次のとおりです。ウル { 高さ: 300px; } ![]() 背景のサイズが定義されているため、問題は解決されません。 UL と同じレベルの 'DIV' 要素に適用されるクラス "clearfix" が役立ちます。 コードをコピー コードは次のとおりです。.クリアフィックス { クリア: 両方; } 「オーバーフロー」を使用する別の解決策もあります。 コードをコピー コードは次のとおりです。ウル { オーバーフロー:自動; } ![]() 浮動項目に関する 9 つのルール: フロートされた項目は、親コンテナーの端を超えて拡張することはできません。左フロートボックスの左マージン端は、その包含ブロックの左端より左側に現れてはなりません。 : : : : : : : : : : : : : : : フローティングのルールは非常にわかりにくいことがわかりますが、これらのルールから、フローティングの目的は、包含ブロックをオーバーフローさせずに、できるだけ上または左/右に近づけて配置することであり、その前に生成されるブロック ボックス、フローティング ボックス、および行ボックスの上端よりも高くしないことであることが簡単にわかります。 |
>>: MySQL の日付フォーマットと複雑な日付範囲クエリ
<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...
適応型レイアウトは、実際のアプリケーションでますます一般的になっています。今日は、主にフローティング...
1. まず、次のパスに従って対応するフォルダを作成します。 ローカルのdockerでmysqlを実行...
最近、CSS 関連の知識ポイントをいくつか見直し、CSS における典型的なマージンの重なりの問題を整...
序文MySQL データベースのパスワードを忘れると、データベースに正常にアクセスできなくなり、パスワ...
Toutiao IT School で、CSS がフロントエンドの画像変形の問題を完璧に解決するとい...
概要MySQL データベースで主キーのないテーブルを表示するための SQL ステートメントをいくつか...
目次遅延読み込みCSS スタイル: HTML部分:スクリプト部分:要約する遅延読み込み名前の通り、私...
1. Nginx ステータス監視Nginx には、Nginx の全体的なアクセス ステータスを監視す...
相対パスの概念現在のファイルの場所を参照ポイントとして使用して、ターゲット ファイルへのパスを確立し...
nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...
Tomcat は Web コンテナとして広く知られています。Java を学び始めたときから現在の仕事...
CSS3 は、要素の 2D 平面変換と視覚的な 3D 空間変換を実装します。2D 変換はより頻繁に使...
この記事では、例を使用して MYSQL パフォーマンス アナライザー EXPLAIN の使用方法を説...
1. コマンドの紹介ipcs コマンドは、Linux のプロセス間通信機能の状態を報告するために使用...