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 の日付フォーマットと複雑な日付範囲クエリ
操作前に必ずお読みください:注意:管理に rancher を使用する場合は、k8s クラスターが構築...
まず、SFTP プロトコルと FTP プロトコルの違いを理解してください。ここでは詳細には触れません...
目次序文1. MySQLはSSL構成を有効にする1.1 SSLが有効になっているかどうかを確認する1...
mysql5.7.18のインストール時に次の問題が発生しました: プログラム入力ポイントfesetr...
docker-compose で mongodb と mysql を構築する詳細な方法を見てみましょ...
障害の説明percona5.6、mysqldump フルバックアップ、バックアップデータのインポート...
DataGrid コントロールの DataSource プロパティがデザイン時に設定されている場合、...
問題の説明: mysqladmin.exe を使用してコマンドを実行すると、次のエラー メッセージが...
最近、データベース関連の操作が多くなり、会社の既存の仕様はあまり包括的ではありません。インターネット...
序文この記事では主に、SQL ステートメントの最適化の一般的な手順について説明します。これは、参考と...
最近の Web サイトでは Https をサポートすることがほぼ標準機能となっており、Nginx は...
Dockerイメージのインポートとエクスポートこの記事では、移行、バックアップ、アップグレードなどの...
MySQL 5.7 より前のバージョンのパスワードを変更する方法:方法1: SET PASSWORD...
High Performance MySQL バージョン 3 (セクション 4.1.7) を見ると、...
Docker の導入規模が大きくなると、コンテナを監視する必要があります。一般的に、Docker に...