如何在 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.tw/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.tw/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+ 瀏覽量

開啟你的職業之旅

透過完成課程獲取認證

開始吧
廣告