CSS 속성을 사용하여 페이지에서 사용자 정의 이미지 부동을 제어하는 방법은 무엇입니까? (예)
- 藏色散人원래의
- 2018-08-10 14:19:436084검색
초보자가 웹페이지를 디자인할 때 가끔 그림이 떠다니는 문제로 인해 어디서부터 시작해야 할지 몰라 어려움을 겪을 때가 있습니다. 이번 글은 주로 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 이미지 플로팅의 구체적인 코드 예시 (오른쪽)은 다음과 같습니다:
<!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>
참고: 모든 주요 브라우저는 float 속성을 지원합니다. 속성 값 "inherit"는 Internet Explorer의 모든 버전(IE8 포함)에서 지원되지 않습니다.
행에 부동 요소를 위한 공간이 거의 없으면 요소는 다음 행으로 점프하고 이 프로세스는 특정 행에 충분한 공간이 생길 때까지 계속됩니다.
float의 가능한 값을 요약하려면:
left 요소가 왼쪽으로 부동합니다.
right 요소가 오른쪽에 떠 있습니다.
none 기본값입니다. 요소는 부동되지 않으며 텍스트에 나타나는 위치에 나타납니다.
inherit는 float 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.
그래서 이 글은 CSS로 그림을 띄우는 방법에 대한 문제를 소개합니다. 도움이 되고 참고가 되기를 바랍니다.
위 내용은 CSS 속성을 사용하여 페이지에서 사용자 정의 이미지 부동을 제어하는 방법은 무엇입니까? (예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!