在php中页面布局 3列左右侧固定中间自适应居中,三栏布局之中间固定，左右两栏自适应几种方案...

三栏布局，假定中间宽度固定为200px，左右两栏自适应

grid布局，请到最新chrome浏览器上运行体验

三栏布局之中间固定，左右两栏自适应

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;

}

.layout.flex .page {

display: flex;

}

.layout.flex .left, .layout.flex .right {

flex: 1;

}

.layout.flex .center {

width: 200px;

}

左边自适应

flex布局-中间固定宽度部分

右边自适应

.layout.table .page {

display: table;

width: 100%;

}

.layout.table .page>div {

display: table-cell;

}

.layout.table .center {

width: 200px;

}

左边自适应

table布局-中间固定宽度部分

右边自适应

.layout.grid .page {

display: grid;

grid-template-rows: 100%;

grid-template-columns: auto 200px auto;

}

左边自适应

grid布局-中间固定宽度部分

右边自适应