三栏布局
左、中、右 三栏,要求先加载中间的结构
(圣杯布局、双飞翼布局)
padding+定位 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" main="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
height: 200px;
padding: 0 200px;
position: relative;
}
.main {
width: 100%;
height: 200px;
background-color: red;
}
.left {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 0;
left: 0;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
margin+浮动 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" main="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
height: 200px;
}
.container div {
float: left;
}
.main {
width: 100%;
height: 200px;
background-color: red;
}
.inner {
margin: 0 200px;
}
.left {
width: 200px;
height: 200px;
background-color: green;
margin-left: -100%;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="inner">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
flex布局 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" main="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
height: 200px;
display: flex;
}
.main {
flex: 1;
height: 200px;
background-color: red;
order: 1;
}
.left {
width: 200px;
height: 200px;
background-color: green;
order: 0;
/* order 数值越小,排列越靠前,默认为0 */
}
.right {
width: 200px;
height: 200px;
background-color: blue;
order: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
grid布局 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" main="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
height: 200px;
display: grid;
grid-template-rows: 200px;
grid-template-columns: 200px auto 200px;
grid-template-areas: 'left main right';
}
.main {
height: 200px;
background-color: red;
grid-area: main;
}
.left {
height: 200px;
background-color: green;
grid-area: left;
}
.right {
height: 200px;
background-color: blue;
grid-area: right;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>