页面布局-三栏布局实现方案

发表于 | 分类于

假设高度已知，请写出三栏布局，左右栏宽度各300px,中间自适应

以下五种实现方案

1
2
3
4
5
6
7
8
9
10
11
12
13
// 公共的css样式`
<style>
    html * {
        padding: 0;
        margin: 0;
    }
    .layout {
        margin-top: 30px;
    }
    .layout article div {
        min-height: 100px;
    }
</style>
float实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<section class="layout float">
    <style>
        .layout.float .left {
            float: left;
            width: 300px;
            background: #ff0000;
        }
        .layout.float .right {
            float: right;
            width: 300px;
            background: #ff9400;
        }
        .layout.float .center {
            background: #c40;
        }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h1>浮动解决方案</h1>
            1.这是三栏布局中间buf部分
            1.这是三栏布局中间buf部分
        </div>
    </article>
</section>
position实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 <section class="layout absolute">
    <style>
        .layout.absolute .left-center-right > div {
            position: absolute;
        }
        .layout.absolute .left {
            left: 0;
            width: 300px;
            background: #ff0000;
        }
        .layout.absolute .center{
            left: 300px;
            right: 300px;
            background: #ff9400;
        }
        .layout.absolute .right {
            right: 0;
            width: 300px;
            background: #c40;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h1>绝对定位解决方案</h1>
            1.这是三栏布局中间buf部分
            1.这是三栏布局中间buf部分
        </div>
        <div class="right"></div>
    </article>
</section>
flex实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 <section class="layout flexbox">
    <style>
        .layout.flexbox {
            margin-top: 140px;
        }
        .layout.flexbox .left-center-right {
            display: flex;
        }
        .layout.flexbox .left {
            width: 300px;
            background: #ff0000;
        }
        .layout.flexbox .center{
            flex: 1;
            background: #ff9400;
        }
        .layout.flexbox .right {
            width: 300px;
            background: #c40;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h1>flexbox解决方案</h1>
            1.这是三栏布局中间buf部分
            1.这是三栏布局中间buf部分
        </div>
        <div class="right"></div>
    </article>
</section>
table实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 <section class="layout table">
     <style>
        .layout.table .left-center-right {
            width: 100%;
            display: table;
            height: 100px;
        }
        .layout.table .left-center-right > div {
            display: table-cell;
        }
        .layout.table .left {
            width: 300px;
            background: #ff0000;
        }
        .layout.table .center{
            background: #ff9400;
        }
        .layout.table .right {
            width: 300px;
            background: #c40;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h1>table表格解决方案</h1>
            1.这是三栏布局中间buf部分
            1.这是三栏布局中间buf部分
        </div>
        <div class="right"></div>
    </article>
</section>
grid实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<section class="layout grid">
    <style>
        .layout.grid .left-center-right {
            width: 100%;
            display: grid;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }
        .layout.grid .left {
            background: #ff0000;
        }
        .layout.grid .center{
            background: #ff9400;
        }
        .layout.grid .right {
            background: #c40;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h1>grid网格解决方案</h1>
            1.这是三栏布局中间buf部分
            1.这是三栏布局中间buf部分
        </div>
        <div class="right"></div>
    </article>
</section>

五种方案比较

  • float：清除浮动，脱离文档流，处理不好，带来很多问题，本身的局限性，兼容性比较好
  • position：快捷，不容易出现问题，布局已经脱离文档流，下面的子元素也要脱离文档流，导致可使用性、有效性差
  • flex：解决上面float、position的不足，兼容性不好，主要应用移动端
  • table：table-cell,很多场景中适用，兼容性好
  • grid：网格布局，新技术，可做很多复杂事情
  • flex与table-cell两种看应用场景使用

如果已知高度去掉，中间的高度变化，左右同时变化，那个方案不实用

  • 推荐flex与table
  • float 需要创建bfc

大家也可以扩展延伸

三栏布局
  • 左右宽度固定，中间自适应
  • 上下高度固定，中间自适应
两栏布局
  • 左宽度固定，右自适应
  • 右宽度固定，左自适应
  • 上高度固定，下自适应
  • 下高度固定，上自适应