如何在 HTML 页面中使用浮动图像？

要在 HTML 中使用浮动图像，请使用 CSS 属性浮动。它允许你将图像浮动到左侧或右侧。其他属性值包括以下内容

序号
属性值和说明
1
无

未浮动
2
左

浮动到左侧
3
右

浮动到右侧
4
初始

默认值

示例

你可以尝试运行以下代码，在 HTML 中使用浮动图像。以下是浮动右和浮动左 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+ 浏览量

开启你的职业之旅

通过完成课程获取认证

开始吧
广告