Fork me on GitHub

m-页面布局

发表于 | 分类于 |
字数统计: 2.4k字 | 阅读时长 ≈ 11分

三栏布局实现方法，比较

三栏布局

左右定宽，中间栏自适应

1.float+margin

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
33
34
35
36
 <style>
    .float_container {
        width: 100%;
        min-height: 100px
    }

    .float_container .left {
        float: left;
        background-color: mediumpurple;
        height: 100%
    }

    .float_container .right {
        float: right;
        background-color: goldenrod;
        height: 100%
    }

    .float_container .left,
    .float_container .right {
        width: 300px
    }

    .float_container .center {
        margin: 0 300px 0 300px;
        background-color: mediumseagreen;
        height: 100%
    }
 </style>
<div class='float_container'>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
        float方法实现三栏布局
    </div>
</div>

float

优点：兼容性好
缺点：

  • 高度只能固定，否则三栏高度不会根据内容同时变化
  • 脱离文档流，后面的元素需要清除浮动

补充：脱离文档流

  • float属性不为none脱离文档流，不会撑开父元素的高度，它还在父元素中，但是其他元素会为其让开位置，环绕在周围。
  • position:absolute，绝对定位，
    • 1.相对于父级或更上级position不是static的元素定位，
    • 2.如果没有满足上一条件的元素，就相对于根元素定位。
      其周围的元素将会忽略它的存在
  • position:fixed，固定定位，相对于根元素定位，完全脱离文档流。
  • position:relative,相对定位，不完全脱离文档流
    周围元素不会忽略它的存在，使用 top\left\right\bottom，设置偏移位置时，周围元素会忽略它的位置移动，还是认为它在原来的位置。

周围元素不会忽略它的存在

2.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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 <section>
    <style>
        .position_container {
            width: 100%;
            min-height: 100px;
            position: relative;
        }


        .position_container>div {
            position: absolute;
            height: 100%
        }

        .position_container .left,
        .position_container .right {
            width: 300px;
        }

        .position_container .left {
            background-color: mediumpurple;
        }

        .position_container .right {
            background-color: goldenrod;
            right: 0
        }

        .position_container .center {
            background-color: mediumseagreen;
            right: 300px;
            left: 300px
        }
    </style>
    <h1>position</h1>
    <div class="position_container">
        <div class="left"></div>
        <div class="center">
            position方法实现三栏布局
            <p>position方法实现三栏布局</p>
            <p>position方法实现三栏布局</p>
            <p>position方法实现三栏布局</p>
            <p>position方法实现三栏布局</p>
        </div>
        <div class="right"></div>
    </div>
</section>

position
缺点：

  • 高度只能固定，否则三栏高度不会根据内容同时变化
  • 脱离了文档流，可用性差

3.flexbox

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
33
34
35
36
37
38
39
40
41
42
43
 <section>
    <style>
        .flex_container {
            /* width: 100%; */
            min-height: 100px;
            display: flex;
            justify-content: space-between;
        }

        .flex_container .left,
        .flex_container .right {
            width: 300px
        }

        .flex_container .left {
            background-color: mediumpurple;
        }

        .flex_container .right {
            background-color: goldenrod;
        }

        .flex_container .center {
            background-color: mediumseagreen;
            flex: 1
        }
    </style>
    <h1>flexbox</h1>
    <div class='flex_container'>
        <div class="left"></div>
        <div class="center">
            flexbox方法实现三栏布局
            <p>flexbox方法实现三栏布局</p>
            <p>flexbox方法实现三栏布局</p>
            <p>flexbox方法实现三栏布局</p>
            <p>flexbox方法实现三栏布局</p>
            <p>flexbox方法实现三栏布局</p>
            <p>flexbox方法实现三栏布局</p>
            <p>flexbox方法实现三栏布局</p>
        </div>
        <div class="right"></div>
    </div>
</section>

缺点：

  • 兼容性有问题

优点：

  • 三栏高度由内容最高的一栏决定，可以自动一致高

flexbox

4.table+table-cell

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
33
34
35
36
37
38
39
40
41
<section>
    <style>
        .table_container {
            display: table;
            width: 100%
        }

        .table_container>div {
            display: table-cell
        }

        .table_container .left,
        .table_container .right {
            width: 300px
        }

        .table_container .left {
            background-color: mediumpurple;
        }

        .table_container .right {
            background-color: goldenrod;
        }

        .table_container .center {
            background-color: mediumseagreen;
        }
    </style>
    <h1>table</h1>
    <div class="table_container">
        <div class="left"></div>
        <div class="center">
            table方法实现三栏布局
            <p>table方法实现三栏布局</p>
            <p>table方法实现三栏布局</p>
            <p>table方法实现三栏布局</p>
            <p>table方法实现三栏布局</p>
        </div>
        <div class="right"></div>
    </div>
</section>

table
优点：

  • 三栏高度由内容最高的一栏决定，可以自动一致高
  • 兼容性好

5.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
29
30
31
32
33
34
35
36
  <section>
    <style>
        .grid_container {
            display: grid;
            width: 100%;
            /*高度*/
            /* grid-template-rows: 100px;
                /*宽度*/
            grid-template-columns: 300px auto 300px;

        }

        .grid_container .left {
            background-color: mediumpurple;
        }

        .grid_container .right {
            background-color: goldenrod;
        }

        .grid_container .center {
            background-color: mediumseagreen;
        }
    </style>
    <h1>网格布局</h1>
    <div class="grid_container">
        <div class="left"></div>
        <div class="center">
            网格布局实现三栏布局
            <p>网格布局实现三栏布局</p>
            <p>网格布局实现三栏布局</p>
            <p>网格布局实现三栏布局</p>
        </div>
        <div class="left"></div>
    </div>
</section>

table
优点：

  • 三栏高度由内容最高的一栏决定，可以自动一致高
  • 代码简单

缺点：新属性兼容性不好
学习方法：CSS-网格属性

上下栏定高，中间栏自适应

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
32
33
34
35
36
37
38
39
40
41
42
43
<section>
    <style>
        .position_layout {
            position: relative;
        }

        .position_layout .header {
            height: 100px;
            background-color: darkorange
        }

        .position_layout .middle {
            width: 100%;
            position: absolute;
            top: 100px;
            bottom: 100px;
            background-color: gold
        }

        .position_layout .footer {
            width: 100%;
            position: absolute;
            bottom: 0px;
            height: 100px;
            background-color: plum
        }
    </style>
    <div class='position_layout'>
        <div class="header">position</div>
        <div class="middle">
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
        </div>
        <div class="footer"></div>
    </div>
</section>

中间高度自适应，但是内容超出时，需要设置 overflows 属性，否则会影响 body

flexbox

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
33
34
35
36
37
38
<section>
      <style>
          .flex_layout {
              display: flex;
              flex-direction: column;
          }

          .flex_layout .header {
              height: 100px;
              background-color: darkorange
          }

          .flex_layout .middle {
              flex: 1;
              background-color: gold
          }

          .flex_layout .footer {
              height: 100px;
              background-color: plum
          }
      </style>
      <div class='flex_layout'>
          <div class="header"></div>
          <div class="middle">
              <p>上下栏定高，中间栏自适应</p>
              <p>上下栏定高，中间栏自适应</p>
              <p>上下栏定高，中间栏自适应</p>
              <p>上下栏定高，中间栏自适应</p>
              <p>上下栏定高，中间栏自适应</p>
              <p>上下栏定高，中间栏自适应</p>
              <p>上下栏定高，中间栏自适应</p>
              <p>上下栏定高，中间栏自适应</p>
              <p>上下栏定高，中间栏自适应</p>
          </div>
          <div class="footer"></div>
      </div>
  </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
29
30
31
32
33
34
35
36
37
<section>
    <style>
        .grid_layout {
            display: grid;
            grid-auto-flow: row;
            grid-template-rows: 100px auto 100px;
        }

        .grid_layout .header {
            background-color: darkorange
        }

        .grid_layout .middle {
            background-color: gold
        }

        .grid_layout .footer {
            background-color: plum
        }
    </style>
    <div class='grid_layout'>
        <div class="header"></div>
        <div class="middle">
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>

        </div>
        <div class="footer"></div>
    </div>
</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
33
34
35
36
37
38
39
40
41
42
43
44
45
 <section>
    <style>
        .table_layout {
            display: table;
            height: 100%;
        }

        .table_layout>div {
            width: 100%;
            display: table-row;
            vertical-align: middle;
        }

        .table_layout .header {
            height: 100px;
            background-color: darkorange
        }

        .table_layout .middle {
            background-color: gold;
            display: table-row;
        }

        .table_layout .footer {
            height: 100px;
            background-color: plum
        }
    </style>
    <div class='table_layout'>
        <div class="header">header</div>
        <div class="middle">
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>
            <p>上下栏定高，中间栏自适应</p>

        </div>
        <div class="footer">footer</div>
    </div>
</section>
  • 三栏中，没有内容的话，背景就不会显示出来
  • 中间高度按照内容自动撑开

两栏布局

左定宽，右自适应

右定宽，左自适应

上定高，下自适应

下定高，上自适应

-------------本文结束感谢阅读-------------