gird实现方法
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.left-center-right{
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.left{
background: red;
}
.center{
background: yellow;
}
.right {
background: blue;
}
</style>
</head>
<body>
<div class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>这是一个grid布局</h1>
<p>这是一个grid布局这是一个grid布局这是一个grid布局这是一个grid布局这是一个grid布局这是一个grid布局这是一个grid布局</p>
</div>
<div class="right"></div>
</div>
</body>
</html>
table-cell实现方法
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.left-center-right{
display: table;
}
.left-center-right>div{
display: table-cell;
}
.left{
width: 300px;
background: red;
}
.center{
background: yellow;
}
.right {
width: 300px;
background: blue;
}
</style>
</head>
<body>
<div class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>这是一个grid布局</h1>
<p>这是一个grid布局这是一个grid布局这是一个grid布局这是一个grid布局这是一个grid布局这是一个grid布局这是一个grid布局</p>
</div>
<div class="right"></div>
</div>
</body>
</html>
