HTML에서 두 개의 열 레이아웃을 구현하는 방법-HTML 튜토리얼-php.cn

HTML에서 두 개의 열 레이아웃을 구현하는 방법

青灯夜游

풀어 주다： 2021-12-03 10:53:42

원래의

8862명이 탐색했습니다.

HTML에서 2열 레이아웃을 구현하는 방법: 1. 부동 속성과 여백 속성을 사용하여 구현합니다. 2. BFC 기술을 사용하여 구현합니다. 3. 테이블 레이아웃 기술을 사용하여 구현합니다. 5, 그리드 그리드 레이아웃 기술을 사용하여 구현되었습니다.

HTML에서 두 개의 열 레이아웃을 구현하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

HTML 웹페이지에서 2열 레이아웃 구현

1. float+margin을 사용하여

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.left1 {
height: 300px;
background-color: red;
width: 400px;
float: left;
}

.right1 {
width: 400px;
height: 300px;
background-color: green;
margin-left: 400px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

로그인 후 복사

2. BFC를 사용하여

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.left2 {
height: 300px;
background-color: red;
width: 400px;
float: left;
}

.right2 {
height: 300px;
background-color: blue;
overflow: hidden;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

로그인 후 복사

을 구현합니다. 4. 플렉스 레이아웃

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent {
display: table;
width: 100%;
table-layout: fixed;
}

.left3 {
display: table-cell;
height: 300px;
width: 300px;
background-color: pink;
}

.right3 {
display: table-cell;
height: 300px;
background-color: purple;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
</div>
</body>
</html>

로그인 후 복사

5. 그리드 레이아웃 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parentf {
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 100%;
}

.left4 {
height: 300px;
width: 300px;
background-color: skyblue;
}

.right4 {
height: 300px;
width: 100%;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
</div>
</body>
</html>

로그인 후 복사

권장 튜토리얼: html 비디오 튜토리얼,

css 비디오 튜토리얼

위 내용은 HTML에서 두 개의 열 레이아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!