CSS를 사용하여 두 개의 div를 같은 줄에 표시하는 방법-CSS 튜토리얼-php.cn

CSS를 사용하여 두 개의 div를 같은 줄에 표시하는 방법

青灯夜游

풀어 주다： 2023-01-03 09:28:02

원래의

61106명이 탐색했습니다.

두 개의 div를 같은 줄에 표시하는 방법: 1. "display:inline;" 또는 "display:inline-block;" 스타일을 두 개의 div 요소로 설정하고 인라인 요소 또는 인라인 블록 요소로 변환합니다. 2. "float:left;" 스타일을 두 개의 div 요소로 설정합니다.

CSS를 사용하여 두 개의 div를 같은 줄에 표시하는 방법

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

HTML에서 div 요소는 블록 요소이고 각 블록 수준 요소는 자체 라인을 차지하므로 여러 div 요소를 한 라인에 표시할 수 없습니다.

CSS를 사용하여 두 개의 div를 같은 줄에 표시하는 방법

그러면 두 개의 div를 같은 줄에 표시하는 방법은 무엇일까요? 아래에서 소개해드리겠습니다.

방법 1: 표시 속성을 사용하여 인라인 요소 또는 인라인 블록 요소로 변환합니다.

표시 속성은 레이아웃 생성 시 해당 요소에 의해 생성되는 표시 상자 유형을 정의하는 데 사용됩니다.

display:inline;: 요소는 요소 앞뒤에 줄 바꿈 없이 인라인 요소로 표시됩니다. display:inline;：元素会被显示为内联元素，元素前后没有换行符。
display:inline-block;

display:inline-block;: 요소는 요소 앞뒤에 줄 바꿈 없이 인라인 블록 요소로 표시됩니다.

예:

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

로그인 후 복사

렌더링: CSS를 사용하여 두 개의 div를 같은 줄에 표시하는 방법

【추천 튜토리얼:

CSS 비디오 튜토리얼】

방법 2: 부동 소수점을 사용하여 Div를 나란히 표시

플로트를 설정합니다. div 이 속성은 병렬 표시 문제를 해결할 수 있습니다. 병렬 div 상자의 전체 너비가 가장 바깥쪽 상자의 너비보다 작거나 같으면 여러 div 개체를 나란히 표시할 수 있습니다. 나란히.

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

로그인 후 복사

Rendering: CSS를 사용하여 두 개의 div를 같은 줄에 표시하는 방법