tips：
the css ">" are:
css3 unique selector, A> B A represents an element selected all the child elements B.
And in that the difference AB, AB to select all descendant elements, and A> B select only generation.
.a, .b {comma refer to the same css style} ;. a .b {spaces progeny element} ;. a> .b {} is greater than the number of elements in the progeny;
A floating solutions
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container>div {
min-height: 100px;
}
.left {
float: left;
width: 300px;
background: blueviolet;
}
.right {
float: right;
width: 300px;
background: RGB (224, 115, 179);
}
.Center {
background: RGB (14, 241, 241);
}
</ style>
</ head>
<body>
<div class = "Container">
! <- This method is known as the left and right columns are fixed 300px intermediate adaptation, it is left, right, center,
if it is left, center, right, then one will fall to the right ->
<div class = "left"> </ div>
<div class = " right "> to the right </ div>
<div class =" Center ">
<H2> floating solutions </ H2>
<H2> three column layout, around 300px by, adaptive intermediate </ H2>
</ div>
</ div >
</ body>
</ HTML>
Second, the absolute positioning solutions
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container>div {
min-height: 100px;
position: absolute;
}
.left {
left: 0;
width: 300px;
background: blueviolet;
}
.center {
left: 300px;
right: 300px;
background: rgb(14, 241, 241);
}
.right {
right: 0;
width: 300px;
background: rgb(224, 115, 179);
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
<h2>三栏布局，左右300px，中间自适应</h2>
</div>
<div class="right"></div>
</div>
</body>
</html>
三、flex解决方案
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* 将容器设置为flex布局 */
.container {
display: flex;
min-height: 100px;
}
.left {
width: 300px;
background: blueviolet;
}
/*中间自适应的原理，让flex=1*/
.center {
flex: 1;
background: rgb(14, 241, 241);
}
.right {
width: 300px;
background: rgb(224, 115, 179);
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center">
<h2>flex布局方案</h2>
<h2>三栏布局，左右300px，中间自适应</h2>
</div>
<div class="right"></div>
</div>
</body>
</html>
四、表格布局解决方案
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* 将容器设置为table布局 */
.container {
display: table;
min-height: 100px;
width: 100%;
}
.container>div {
display: table-cell;
}
.left {
width: 300px;
background: blueviolet;
}
.center {
background: rgb(14, 241, 241);
}
.right {
width: 300px;
background: rgb(224, 115, 179);
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center">
<h2>表格布局解决方案</h2>
<h2>三栏布局，左右300px，中间自适应</h2>
</div>
<div class="right"></div>
</div>
</body>
</html>
五、网格布局解决方案
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* 将容器声明为网格布局 网格有行有列
这里设置行高为100px，设为3列，左右侧300px，中间自适应
*/
.container {
display: grid;
min-height: 100px;
width: 100%;
grid-template-columns: 300px auto 300px;
}
.left {
background: blueviolet;
}
.center {
background: rgb(14, 241, 241);
}
.right {
background: rgb(224, 115, 179);
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center">
<h2>网格布局解决方案</h2>
<h2>三栏布局，左右300px，中间自适应</h2>
</div>
<div class="right"></div>
</div>
</body>
</html>
