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

집

웹 프론트엔드

CSS 튜토리얼

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

青灯夜游

Mar 05, 2021 am 11:58 AM

cssdiv

두 개의 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으로 문의하세요.

핫 AI 도구

뜨거운 도구

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.