在php中页面布局 3列左右侧固定中间自适应居中,三列布局（左右固定，中间自适应）...

1、定位

我是左边，我是固定的

我是中间，我是自适应的，左边右边都position固定了，他们脱离了文档流，我终于得到机会挤进中间啦！只要我margin一下就没人会挡住我啦！我可真是个小机灵鬼(同时，我还是个自由人，我div写在开头中间结尾都可以呢)

我是右边，我也是固定的

*{

margin:0;

padding: 0;

}

.left, .right{

width: 200px;

height: 200px;

background: red;

position: absolute;

top: 0;

}

.left{

left: 0;

}

.right{

right: 0;

}

.middle{

height: 200px;

background:#efbdbd;

margin-left: 200px;

margin-right: 200px;

}

2、浮动

我是左边，我是固定的

我是右边，我也是固定的

我是中间，我是自适应的，左右浮动脱离了文档流，我才挤进来呢，margin一下也不会被挡住啦(这里我div必须在左右的后面，因为我在前面的话，他们会浮在我后面的哟)

.left, .right{

width: 200px;

height: 200px;

background: red;

}

.left{

float: left;

}

.right{

float: right;

}

.middle{

height: 200px;

background:#efbdbd;

margin-left: 200px;

margin-right: 200px;

}

3、圣杯布局

我是中间，我是自适应的

1、左中右float：left；顺便position：relative后面会用到

2、中间width：100%；

3、这时，中间元素会把两边撑开，那么我们用margin-left把他拉回来；

4、两边元素倒是回来了，中间被盖住了怎么办？不着急，整个外层加个padding；

5、解决了上一个问题，左右元素又偏了！还记得刚开始的定位吗？对！对左右元素定位就好啦！

我是左边，我是固定的

我是右边，我也是固定的

.middle, .left, .right{

float: left;

height: 200px;

position: relative;

}

.middle{

width: 100%;

background:#efbdbd;

}

.content{

padding:0 200px;

}

.left{

width:200px;

background:red;

margin-left: -100%;

left: -200px;

}

.right{

background:red;

width:200px;

margin-left: -200px;

right: -200px;

}

4、双飞翼布局

我是中间，我是自适应的

1、左中右float：left；

2、中间width：100%；

3、这时，中间元素会把两边撑开，那么我们用margin-left把他拉回来；

4、两边元素倒是回来了，中间被盖住了怎么办？这次我们不在整个外层加个padding了；我们在middle里面加个子标签并margin

5、可以啦！

我是左边，我是固定的

我是右边，我也是固定的

.middle, .left, .right{

float: left;

height: 200px;

}

.middle{

width: 100%;

background:#efbdbd;

}

.middle_son{

margin:0 200px;

}

.left{

width:200px;

background:red;

margin-left: -100%;

}

.right{

background:red;

width:200px;

margin-left: -200px;

}

5、flex

我是左边，我是固定的

我是中间，我是自适应的，利用css3的新属性fles，弹性布局，父元素设置display:flex,中间div设置flex；1；

我是右边，我也是固定的

.content{

display: flex;

}

.left, .right{

width: 200px;

height: 200px;

background: red;

}

.middle{

height: 200px;

background:#efbdbd;

flex: 1;

}

如果想要做两列布局(左边固定，右边自适应)，全部可以参考这个，唯一有一种方法自己的方法利用BFC也很简单。

圣杯布局和双飞翼布局是参考了这位同学的，可以说是照搬来的。

https://www.cnblogs.com/imwtr...