Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML 페이지에서 플로팅 이미지를 사용하는 방법은 무엇입니까?


HTML에서 부동 이미지를 사용하려면 CSS 속성 float를 사용하십시오. 이미지를 왼쪽이나 오른쪽으로 띄울 수 있습니다. 더 많은 속성 값은 다음과 같습니다.

Sr.No.
속성 값 및 설명
1
없음
뜨지 않음
2
왼쪽
왼쪽으로 뜨다
3
오른쪽
오른쪽으로 뜨다
4
초기
기본값

HTML 페이지에서 플로팅 이미지를 사용하는 방법은 무엇입니까?

예시

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://www.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://www.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>

출력

HTML 페이지에서 플로팅 이미지를 사용하는 방법은 무엇입니까?