div 布局_三栏布局都有哪些实现方法？：）

好玩的三栏布局，我们来啦～～

实现方法都有哪些

1. absolute 布局
2. float 布局
3. flex 布局
4. grid 布局
5. table 布局

代码实现

1. absolute 布局

• • 先看 html 代码

<

• • css 代码

.absolute-layout

2. float 布局

• • html 部分

<!-- 注意左右中三个元素的顺序 -->

• • css 部分

.float-layout

3. flex 布局

• • html 部分

<

• • css 部分

// 注意 flex-grow 属性，这个是关键

4. grid 布局

• • html 部分

<

• • css 部分

// 关键是 grid-template-columns 属性

5. table 布局

• • html 部分

<

• • css 部分

.table-layout

只有纯代码，无详细解释，float，absolute 这些不必多说。想了解 flex，grid，table 布局的可以去看看张鑫旭大神的文章，超级详细，一看就懂。

写给自己看的display: grid布局教程​www.zhangxinxu.com

写给自己看的display: flex布局教程​www.zhangxinxu.com 我所知道的几种display:table-cell的应用 " 张鑫旭-鑫空间-鑫生活​www.zhangxinxu.com

以上是我整理的实现三栏布局的 5 种方式，欢迎补充～～