HTML5 div 요소는 기본적으로 한 줄에 두 개를 배치할 수 없습니다. div는 블록 수준 요소이므로 한 줄에 두 개의 div를 표시할 수 없습니다. 그러나 div 요소에 "display: inline;" 스타일을 추가하여 인라인으로 변환할 수 있습니다. 여러 div를 구현할 수 있도록 요소를 사용하여 동일한 줄에 표시합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
HTML5 div 요소는 기본적으로 한 줄에 두 개를 배치할 수 없습니다.
div는 블록 수준 요소이며 하나의 요소가 자체 줄을 차지하므로 기본적으로 두 개의 div를 같은 줄에 표시할 수 없습니다.
인라인 요소의 주요 특징은 다음과 같습니다.블록 수준 요소의 주요 특징은 자체 라인을 점유한다는 것입니다.
블록 수준 요소의 주요 특징은 다음과 같습니다.
줄 바꿈 태그 사용 여부에 관계없이 블록 수준 요소는 항상 새 줄의 시작에 있습니다.
블록 수준 요소의 너비, 높이, 여백 및 패딩을 모두 제어할 수 있습니다. 블록 수준 요소는 생략되며 너비는 현재 브라우저 창의 기본값으로 설정됩니다.
블록 수준 요소의 너비에는 다른 인라인 요소와 블록 수준 요소가 포함될 수 있습니다.
- 하지만 표시 속성을 사용하여 블록 수준 요소를 인라인 요소로 변환하면 여러 div를 같은 줄에 표시할 수 있습니다.
블록 수준 요소에인라인 요소와 기타 요소는 같은 줄에 표시됩니다.
인라인 요소의 너비, 높이, 여백 및 패딩은 변경할 수 없습니다.
- 인라인 요소의 너비는 콘텐츠의 너비이며 변경할 수 없습니다.
- 인라인 요소는 텍스트나 기타 인라인 요소만 수용할 수 있습니다.
- 블록 수준 요소를 인라인 요소로 변환
을 설정하여 블록 수준 요소를 인라인 요소로 변환합니다. 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
div{
background-color: #FFC0CB;
margin: 10px;
}
.box {
display: inline;
}
</style>
</head>
<body>
<div>一个div元素，块级元素</div>
<div>一个div元素，块级元素</div>
<div>一个div元素，转为了行内元素</div>
<div>一个div元素，转为了行内元素</div>
</body>
</html>display：inline;
(학습 동영상 공유:
css 동영상 튜토리얼, 
웹 프론트엔드
위 내용은 HTML5 div 두 개를 한 줄에 배치할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
