Bagaimana untuk melaksanakan susun atur dua lajur dalam html-html tutorial-php.cn

Bagaimana untuk melaksanakan susun atur dua lajur dalam html

青灯夜游

Lepaskan： 2021-12-03 10:53:42

asal

8871 orang telah melayarinya

Kaedah untuk melaksanakan reka letak dua lajur dalam HTML: 1. Gunakan atribut apungan dan atribut margin untuk melaksanakan; 2. Gunakan teknologi BFC untuk melaksanakan; teknologi Untuk mencapai; 5. Gunakan teknologi susun atur grid untuk mencapai.

Bagaimana untuk melaksanakan susun atur dua lajur dalam html

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Mencapai reka letak dua lajur dalam halaman web html

1 Gunakan margin apungan untuk merealisasikan

<!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>

Salin selepas log masuk

2 untuk merealisasikan

<!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>

Salin selepas log masuk

3 Gunakan susun atur jadual

<!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>

Salin selepas log masuk

4 >

5. Gunakan reka letak grid

<!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>

Salin selepas log masuk

Tutorial yang disyorkan:

tutorial video html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent {
height: 400px;
display: grid;
grid-template-columns: 50% 50%;
width: 100%;
}

.left5 {
background-color: skyblue;
}

.right5 {
background-color: pink;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
</div>
</body>
</html>

Salin selepas log masuk

tutorial video css

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan susun atur dua lajur dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!