CSS에서 4개의 div가 나란히 표시되도록 설정하는 방법-CSS 튜토리얼-php.cn

CSS에서 4개의 div가 나란히 표시되도록 설정하는 방법

青灯夜游

풀어 주다： 2023-01-07 11:44:44

원래의

11962명이 탐색했습니다.

CSS를 사용하여 4개의 div를 나란히 설정하는 방법: 1. float 속성을 사용하여 4개의 div를 플로팅합니다. 2. "display:inline;" 또는 "display: inline-block;" 스타일을 사용하여 4개의 div를 인라인 요소 또는 인라인 블록 요소로 변환합니다.

CSS에서 4개의 div가 나란히 표시되도록 설정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

div는 자체 줄을 차지하는 블록 요소이며 너비가 상위 요소의 너비를 자동으로 채우며 여러 div 요소가 자동으로 줄바꿈되어 표시됩니다. 그렇다면 여러 div 요소를 나란히 표시하려면 어떻게 해야 할까요? 아래 방법을 소개해드리겠습니다.

방법 1: float를 사용하여 div를 부동시키세요

나란한 div 상자의 전체 너비가 가장 바깥쪽 상자의 너비보다 작거나 같으면 여러 div 개체를 옆으로 표시할 수 있습니다. 나란히.

예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 120px;
				border: 1px solid red;
				float: left;
			}
		</style>
	</head>
	<body>
		<div>div测试文本！</div>
		<div>div测试文本！</div>
		<div>div测试文本！</div>
		<div>div测试文本！</div>
	</body>
</html>

로그인 후 복사

Rendering:

CSS에서 4개의 div가 나란히 표시되도록 설정하는 방법

float 속성은 요소가 부동하는 방향을 정의합니다. 역사적으로 이 속성은 항상 이미지에 적용되어 텍스트가 이미지 주위를 둘러싸도록 했지만 CSS에서는 모든 요소가 부동될 수 있습니다. 부동 요소는 요소 유형에 관계없이 블록 수준 상자를 만듭니다.

방법 2: display 속성을 사용하여 div를 인라인 요소 또는 인라인 블록 요소로 변환합니다.

인라인 요소 또는 인라인 블록 요소는 배타적 라인을 차지하지 않으며 인접한 인라인 요소는 같은 줄, 한 줄에 더 이상 공백이 없을 때까지 줄이 변경됩니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 200px;
				border: 1px solid red; 
				display:inline;
				/* display: inline-block; */
			}
		</style>
	</head>
	<body>
		<div>div测试文本！</div>
		<div>div测试文本！</div>
		<div>div测试文本！</div>
		<div>div测试文本！</div>
	</body>
</html>

로그인 후 복사

Rendering:

CSS에서 4개의 div가 나란히 표시되도록 설정하는 방법