CSS를 사용하여 두 개의 div를 같은 줄에 표시하는 방법
- 青灯夜游원래의
- 2021-03-05 11:58:1960735검색
두 개의 div를 같은 줄에 표시하는 방법: 1. "display:inline;" 또는 "display:inline-block;" 스타일을 두 개의 div 요소로 설정하고 인라인 요소 또는 인라인 블록 요소로 변환합니다. 2. "float:left;" 스타일을 두 개의 div 요소로 설정합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
HTML에서 div 요소는 블록 요소이고 각 블록 수준 요소는 자체 라인을 차지하므로 여러 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 비디오 튜토리얼】
방법 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를 같은 줄에 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!