CSS 属性を使用してページ上の画像のカスタムフローティングを制御するにはどうすればよいですか? （例）-CSSチュートリアル-php.cn

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

藏色散人

リリース： 2018-08-10 14:19:43

オリジナル

6118 人が閲覧しました

初心者が 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>

ログイン後にコピー