>  기사  >  웹 프론트엔드  >  CSS를 사용하여 두 개의 div를 같은 줄에 표시하는 방법

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

青灯夜游
青灯夜游원래의
2021-03-05 11:58:1960876검색

두 개의 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를 같은 줄에 표시하는 방법

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

대체되지 않은 부동 요소의 경우 명시적인 너비를 지정하세요. 그렇지 않으면 최대한 좁아집니다.

더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 CSS를 사용하여 두 개의 div를 같은 줄에 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.