ホームページ  >  記事  >  ウェブフロントエンド  >  CSS 属性を使用してページ上の画像のカスタム フローティングを制御するにはどうすればよいですか? (例)

CSS 属性を使用してページ上の画像のカスタム フローティングを制御するにはどうすればよいですか? (例)

藏色散人
藏色散人オリジナル
2018-08-10 14:19:436083ブラウズ

初心者が 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 属性を使用してページ上の画像のカスタム フローティングを制御するにはどうすればよいですか? (例)

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>


CSS 属性を使用してページ上の画像のカスタム フローティングを制御するにはどうすればよいですか? (例)

注: すべての主要なブラウザは float 属性をサポートしています。属性値「inherit」は、Internet Explorer (IE8 を含む) のどのバージョンでもサポートされていません。

行上の浮動要素用のスペースがほとんどない場合、要素は次の行にジャンプし、特定の行に十分なスペースができるまでこのプロセスが続きます。

float の可能な値を要約すると:

left 要素は左にフロートします。

right 要素は右に移動します。

none デフォルト値。要素はフロート表示されず、テキスト内のどこにでも表示されます。

inherit は、float 属性の値が親要素から継承される必要があることを指定します。

それでは、この記事ではCSSで画像を浮かせる方法について紹介します。参考になれば幸いです。




以上がCSS 属性を使用してページ上の画像のカスタム フローティングを制御するにはどうすればよいですか? (例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。