三栏布局，假定中间宽度固定为200px，左右两栏自适应
grid布局，请到最新chrome浏览器上运行体验
三栏布局左右自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三栏布局之中间固定，左右两栏自适应</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
section.layout {
margin-bottom: 50px;
text-align: center;
color: white;
}
.left {
background-color: #65d;
}
.center {
background-color: #f05;
}
.right {
background-color: blue;
}
</style>
</head>
<body>
<section class="layout flex">
<!-- flex布局方案 -->
<style>
.layout.flex .page {
display: flex;
}
.layout.flex .left, .layout.flex .right {
flex: 1;
}
.layout.flex .center {
width: 200px;
}
</style>
<article class="page">
<div class="left">左边自适应</div>
<div class="center">flex布局-中间固定宽度部分</div>
<div class="right">右边自适应</div>
</article>
</section>
<section class="layout table">
<!-- table 布局方案 -->
<style>
.layout.table .page {
display: table;
width: 100%;
}
.layout.table .page>div {
display: table-cell;
}
.layout.table .center {
width: 200px;
}
</style>
<article class="page">
<div class="left">左边自适应</div>
<div class="center">table布局-中间固定宽度部分</div>
<div class="right">右边自适应</div>
</article>
</section>
<section class="layout grid">
<!-- 网格布局方案 -->
<style>
.layout.grid .page {
display: grid;
grid-template-rows: 100%;
grid-template-columns: auto 200px auto;
}
</style>
<article class="page">
<div class="left">左边自适应</div>
<div class="center">
grid布局-中间固定宽度部分
</div>
<div class="right">右边自适应</div>
</article>
</section>
</body>
</html>
网友评论