CSS에서 4개의 div가 나란히 표시되도록 설정하는 방법
- 青灯夜游원래의
- 2021-07-21 15:41:0511961검색
CSS를 사용하여 4개의 div를 나란히 설정하는 방법: 1. float 속성을 사용하여 4개의 div를 플로팅합니다. 2. "display:inline;" 또는 "display: inline-block;" 스타일을 사용하여 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:
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:
display 속성은 레이아웃을 설정할 때 요소에서 생성되는 표시 상자 유형을 정의하는 데 사용됩니다.
display:inline;: 요소는 요소 앞뒤에 줄 바꿈 없이 인라인 요소로 표시됩니다.
display:inline-block;: 요소는 요소 앞뒤에 줄 바꿈 없이 인라인 블록 요소로 표시됩니다.
(동영상 공유 학습: css 동영상 튜토리얼)
위 내용은 CSS에서 4개의 div가 나란히 표시되도록 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!