ホームページ > 記事 > ウェブフロントエンド > CSS 属性を使用してページ上の画像のカスタム フローティングを制御するにはどうすればよいですか? (例)
初心者が Web ページをデザインするとき、画像が浮いてしまうという問題が発生し、どこから始めればよいのかわからないことがあります。この記事ではCSSフローティングに関する関連知識を中心に紹介しますので、困っている方のお役に立てれば幸いです。まず、CSS の重要な属性である float について理解する必要があります。
float 属性は、要素が浮動する方向を定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フローティング要素は、要素のタイプに関係なく、ブロック レベルのボックスを作成します。非置換要素が浮動している場合は、明示的な幅が指定されます。それ以外の場合は、可能な限り狭くなります。
CSS画像フローティング(左側)の具体的なコード例は次のとおりです:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css左浮动代码测试</title> <style> img { float:left; } </style> </head> <body> <p>在下面的段落中,我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p> <p> <img src="2.png" / alt="CSS 属性を使用してページ上の画像のカスタム フローティングを制御するにはどうすればよいですか? (例)" > php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线修 改示例,查看php执行效果是本站的一大特色,php从入门到精通,一站式php自学平台。 php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线 修改示例,查看php执行效果是本站的一大特色,php从入门到精通,一站式php自学平台。 </body> </html>
上記のコードのテスト効果は以下のとおりです:
CSS画像フローティングの具体的なコード例(右側) は次のとおりです:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css右浮动代码测试</title> <style> img { float:right; } </style> </head> <body> <p>在下面的段落中,我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p> <p> <img src="2.png" / alt="CSS 属性を使用してページ上の画像のカスタム フローティングを制御するにはどうすればよいですか? (例)" > php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线修 改示例,查看php执行效果是本站的一大特色,php从入门到精通,一站式php自学平台。 php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线 修改示例,查看php执行效果是本站的一大特色,php从入门到精通,一站式php自学平台。 </body> </html>
注: すべての主要なブラウザは float 属性をサポートしています。属性値「inherit」は、Internet Explorer (IE8 を含む) のどのバージョンでもサポートされていません。
行上の浮動要素用のスペースがほとんどない場合、要素は次の行にジャンプし、特定の行に十分なスペースができるまでこのプロセスが続きます。
float の可能な値を要約すると:
left 要素は左にフロートします。
right 要素は右に移動します。
none デフォルト値。要素はフロート表示されず、テキスト内のどこにでも表示されます。
inherit は、float 属性の値が親要素から継承される必要があることを指定します。
それでは、この記事ではCSSで画像を浮かせる方法について紹介します。参考になれば幸いです。
以上がCSS 属性を使用してページ上の画像のカスタム フローティングを制御するにはどうすればよいですか? (例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。