ホームページ > 記事 > ウェブフロントエンド > CSS 属性を使用してページ上の画像のカスタム フローティングを制御するにはどうすればよいですか? （例）
CSS 属性を使用してページ上の画像のカスタム フローティングを制御するにはどうすればよいですか? （例）
- 藏色散人オリジナル
- 2018-08-10 14:19:436109ブラウズ
初心者が 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 サイトの他の関連記事を参照してください。