Home > Article > Web Front-end > How to implement two column layout in html
Methods to implement two-column layout in html: 1. Use float attributes and margin attributes to implement; 2. Use BFC technology to implement; 3. Use table layout technology to implement; 4. Use flex elastic layout technology To achieve; 5. Use grid layout technology to achieve.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
1. Use float margin to realize
<!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. Use BFC to realize
<!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>3. Use table layout
<!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>4. Use flex layout
<!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>5. Use grid layout
<!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>Recommended tutorials: html video tutorial, css video tutorial
The above is the detailed content of How to implement two column layout in html. For more information, please follow other related articles on the PHP Chinese website!