如何用浮动图片 in HTML page?

要在 HTML 中使用浮动图片，请使用 CSS 属性 float。它允许你使图像向左或向右浮动。更多属性值包括以下内容

序号
属性值和说明
1
none

不浮动
2
left

向左浮动
3
right

向右浮动
4
initial

默认值

示例

你可以尝试运行以下代码，以便在 HTML 中使用浮动图片。以下是 float right 和 float left CSS 属性的用法

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Floating Image</title>
   </head>

<body>
   <h1>Float Right</h1>
   <p>The below image floats to the right.</p>
   <p>
      <img src="https://tutorialspoint.com/green/images/logo.png" style="float:right" width="190" height="84" />
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
      This is demo text. This is demo text.
   </p>
   <h1>Float Left</h1>
      <p>The below image floats to the left.</p>
      <p>
         <img src="https://tutorialspoint.com/green/images/logo.png" style="float:left" width="190" height="84" />
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
      </p>
   </body>
</html>

输出

更新日期：2021 年 12 月 22 日

20K+ 浏览

开启你的 职业生涯

完成课程获得认证

开始
广告