CSS 속성을 사용하여 페이지에서 사용자 정의 이미지 부동을 제어하는 방법은 무엇입니까? (예)-CSS 튜토리얼-php.cn

CSS 속성을 사용하여 페이지에서 사용자 정의 이미지 부동을 제어하는 방법은 무엇입니까? (예)

藏色散人

풀어 주다： 2018-08-10 14:19:43

원래의

6149명이 탐색했습니다.

초보자가 웹페이지를 디자인할 때 가끔 그림이 떠다니는 문제로 인해 어디서부터 시작해야 할지 몰라 어려움을 겪을 때가 있습니다. 이번 글은 주로 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>

로그인 후 복사