关注前端 | 前端博客
当前位置: CSS > 三栏布局,左右栏宽为300px,中间自适应

三栏布局,左右栏宽为300px,中间自适应

2019-12-21 分类:CSS 作者:管理员 阅读(382)

1. flexbox 弹性伸缩盒子
2. table 表格布局
3. absolute 绝对定位
4. grid网格布局
5. 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局左右宽度300px,中间宽度自适应</title>
</head>
<style>
    *{margin: 0;padding: 0;}
    /* flex */
    .flex-container{
        height: 100px;
        background-color: bisque;
        display: flex;
    }
    .flex-left,.flex-right{
        width: 300px;
        height: 100px;
        background-color: #0fb9b1;
   }
    .flex-middle{
        flex: 1;
        background-color: #e77f67;
   }
    /* table */
    .table-container{
        width: 100%;
        height: 100px;
        background-color: bisque;
        display: table;
    }
    .table-left,.table-right{
        width: 300px;
        height: 100px;
        background-color: #0fb9b1;
       display: table-cell;
    }
    .table-middle{
        width: 100%;
        height: 100px;
        background-color: #e77f67;
   }
    /* float */
    .float-container{
        width: 100%;
        height: 100px;
        background-color: bisque;
    }
    .float-left,.float-right{
        width: 300px;
        height: 100px;
        background-color: #0fb9b1;
       
    }
    .float-right{
        float: right;
    }
    .float-left{
        float: left;
    }
    .float-middle{
        height: 100px;
        background-color: #e77f67;
   }
    /* position */
    .position-container{
        width: 100%;
        height: 100px;
        background-color: bisque;
        position: relative;
    }
    .position-left,.position-right{
        width: 300px;
        height: 100px;
        background-color: #0fb9b1;
       position: absolute;
    }
    .position-left{
        left: 0;
    }
    .position-right{
        right: 0;
    }
    .position-middle{
        height: 100px;
        position: absolute;
        left: 300px;
        right: 300px;
        background-color: #e77f67;
   }
    /* 第五种 grid */
    .grid-container{
        height: 100px;
        background-color: bisque;
        display: grid;
        grid-template-columns: 300px auto 300px;
    }
    .grid-left,.grid-right{
        background-color: #0fb9b1;
   }
    .grid-middle{
        background-color: #e77f67;
   }
</style>
<body>
    <!-- 第一种 flex -->
    <div class="flex-container">
        <div class="flex-left"></div>
        <div class="flex-middle">第一种 flex</div>
        <div class="flex-right"></div>
    </div>
    <!-- 第二种 table -->
    <div class="table-container">
        <div class="table-left"></div>
        <div class="table-middle">第二种 table</div>
        <div class="table-right"></div>
    </div>
    <!-- 第三种 float -->
    <div class="float-container">
        <div class="float-left"></div>
        <div class="float-right"></div>
        <div class="float-middle">第三种 float</div>
    </div>
    <!-- 第四种 position -->
    <div class="position-container">
        <div class="position-left"></div>
        <div class="position-middle">第四种 position</div>
        <div class="position-right"></div>
    </div>
    <!-- 第五种 grid -->
    <div class="grid-container">
        <div class="grid-left"></div>
        <div class="grid-middle">第五种 grid</div>
        <div class="grid-right"></div>
    </div>
</body>
</html>

111

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(1) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
1

感谢您让我添加个鸡腿!

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - 三栏布局,左右栏宽为300px,中间自适应

博客简介

一个不知名的前端菜鸟,梦想能够飞上青天!
掘金 思否 npm github

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线