css的经典三栏布局如何实现,CSS-三栏布局的几种实现方式

常见布局

float布局、Position定位、table布局、弹性(flex)布局、网格(grid)布局、(圣杯布局、双飞翼布局、calc()函数)

三栏布局

左右定宽(200px)，中间自适应

大概就是这样的：

如果中间部分height比较大，那效果是这样:

1.float布局

模板部分：

左边元素定宽

右边元素定宽

中间元素自适应

// 注意这里！

复制代码

css部分：

/*清除浏览器默认边距*/

* {

padding: 0;

margin: 0;

}

.wrap {

border: 1px solid red;

overflow: hidden; // 清除浮动，不然可能会影响其他元素的显示

}

.left {

float: left;

width: 200px;

height: 200px;

background: palevioletred;

}

.content {

height: 200px;

background: plum;

margin-left: 200px; // 这个非常有必要！

margin-right: 200px; // 这个非常有必要！

}

.right {

float: right;

width: 200px;

height: 200px;

background: powderblue;

}

复制代码

注意：

DOM上左右元素要先加上，将中间元素放最后！不然就会变成下面这个样子：

margin-left: 200px和margin-right: 200px非常有必要！因为如果一旦中间元素的高度大于两边时，就是这个样子了：

因为float浮动，元素脱离了文档流，怕会影响其他元素显示，所以一定要记得清除浮动，这里是用BFC清除浮动，也有其他清除浮动的方法，可以自行了解一下，毕竟面试还是经常问到的

2.Position定位

模板部分：

左边元素定宽

右边元素定宽

中间元素自适应

// 和float布局一样！

复制代码

css部分：

/*清除浏览器默认边距*/

* {

padding: 0;

margin: 0;

}

.wrap {

border: 1px solid red;

overflow: hidden;

position: relative; // Position定位

}

.left {

position: absolute; // 绝对定位

left: 0; // 靠左靠左

width: 200px;

height: 200px;

background: palevioletred;

}

.content {

height: 300px;

background: plum;

margin-left: 200px; // 这个和float布局注意里说的一样！

margin-right: 200px; // 这个就不必多说了吧！

}

.right {

position: absolute; // 绝对定位

right: 0; // 靠右靠右

width: 200px;

height: 200px;

background: powderblue;

}

复制代码

注意：

和float布局注意点一样啦！

3.table布局

模板部分：

左边元素定宽

中间元素自适应

//中间元素这次不是放最后了

右边元素定宽

复制代码

css部分：

/*清除浏览器默认边距*/

* {

padding: 0;

margin: 0;

}

.wrap {

border: 1px solid red;

overflow: hidden;

display: table; // 表格布局

width: 100%; // 这个也是一个小细节

}

.left {

display: table-cell; // 单元格

width: 200px;

height: 200px;

background: palevioletred;

}

.content {

display: table-cell; // 单元格

height: 300px; // 这里中间元素比两边长

background: plum;

}

.right {

display: table-cell; // 单元格

width: 200px;

height: 200px;

background: powderblue;

}

复制代码

注意：

DOM上得按照左中右放置了，不然就会出现左右元素先出现的情况了

虽然我们给中间元素设置的height大于左右元素，但在显示的时候，三个元素是等高的(参照上面的图)，而且高度是由三个元素中最大高度来决定

width: 100%也是一个该注意的小细节，因为如果我们没有给父元素设置宽度，就会变成酱紫，后面空出来了：

4.弹性(flex)布局

模板部分：

左边元素定宽

中间元素自适应

//中间元素这次不是放最后了

右边元素定宽

复制代码

css部分：

/*清除浏览器默认边距*/

* {

padding: 0;

margin: 0;

}

.wrap {

border: 1px solid red;

overflow: hidden;

display: flex; // 弹性布局

}

.left {

width: 200px;

height: 200px;

background: palevioletred;

}

.content {

flex: 1; // 扩大比例为1，自动填满多余空间

height: 300px;

background: plum;

}

.right {

width: 200px;

height: 200px;

background: powderblue;

}

复制代码

注意:

这里唯一要知道的就是flex了，是flex-grow(增长比例)和flex-shrink(缩小比例)和flex-basis(默认大小)的缩写。

5.网格布局

模板部分：

左边元素定宽

中间元素自适应

//中间元素这次不是放最后了

右边元素定宽

复制代码

css部分：

/*清除浏览器默认边距*/

* {

padding: 0;

margin: 0;

}

.wrap {

border: 1px solid red;

overflow: hidden;

display: grid; // 网格布局

grid-template-columns: 200px auto 200px; // 左边宽度200px,中间自适应，右边宽度200px

}

.left {

height: 200px;

background: palevioletred;

}

.content {

height: 300px;

background: plum;

}

.right {

height: 200px;

background: powderblue;

}

复制代码

注意：

如果想让三个元素等高，可以直接设置grid-template-rows: 200px

6.圣杯布局

模板部分：

中间元素自适应

// 中间元素先渲染

左边元素定宽

右边元素定宽

复制代码

css部分：

/*清除浏览器默认边距*/

* {

padding: 0;

margin: 0;

}

.wrap {

border: 1px solid red;

overflow: hidden;

padding-left: 200px;

padding-right: 200px;

}

.left {

position: relative;

left: -200px;

float: left;

margin-left: -100%;

width: 200px;

height: 200px;

background: palevioletred;

}

.content {

float: left;

width: 100%;

height: 300px;

background: plum;

}

.right {

float: left;

margin-right: -200px;

width: 200px;

height: 200px;

background: powderblue;

}

复制代码

注意：

中间元素在DOM结构上优先，先行渲染

圣杯布局详细实现过程移步这里

7. 双飞翼布局

模板部分：

中间元素自适应

左边元素定宽

右边元素定宽

复制代码

css部分：

/*清除浏览器默认边距*/

* {

padding: 0;

margin: 0;

}

.wrap {

border: 1px solid red;

overflow: hidden;

width: 100%;

}

.left {

float: left;

width: 200px;

margin-left: -100%;

height: 200px;

background: palevioletred;

}

.wrap-content{

float: left;

width: 100%;

}

.content {

margin-left: 200px;

margin-right: 200px;

height: 300px;

background: plum;

}

.right {

float: left;

width: 200px;

margin-left: -200px;

height: 200px;

background: powderblue;

}

复制代码

注意：

中间元素在DOM结构上优先，先行渲染

双飞翼布局与圣杯布局不同的是，中间的div包裹了一个div，且将原本.content的float: left;``width: 100%;移到包裹div上

双飞翼布局详细实现过程移步这里

8.calc()函数

模板部分：

左边元素定宽

中间元素自适应

右边元素定宽

css部分：

/*清除浏览器默认边距*/

* {

padding: 0;

margin: 0;

}

.wrap {

border: 1px solid red;

overflow: hidden;

}

.left {

float: left;

width: 200px;

height: 200px;

background: palevioletred;

}

.content {

float: left;

width: calc(100% - 400px); // 动态计算

height: 300px;

background: plum;

}

.right {

float: left;

width: 200px;

height: 200px;

background: powderblue;

}

复制代码

结尾

以上就是作为前端菜鸡的我的一点点总结啦，有错误一定要告诉我！！请务必救救孩子吧！