【我的前端】CSS网页布局：实现三栏布局的方法

CSS网页布局：实现三栏布局的方法

💖💖💖💕💕💕欢迎来到本博客💕💕💕💖💖💖
.
🎁支持：如果觉得博主的文章写得还说得过去或者博客对您有帮助的话，可以关注一下博主，如果三连收藏支持就更好啦！这就是给予我最大的支持！

🎉🎉Welcome to my blog!🎉🎉

📃个人CSDN博客主页：热爱科技的刘同学🌈🌈🌈

实现三栏布局的3种方法

需求：实现左右两栏固定宽度，中间一栏自适应宽度。

1、浮动float+cac()

核心思想：先使用浮动将三栏水平排列，然后对中间栏使用 calc() 函数来计算去除左右两栏固定宽度后剩余的宽度。

HTML结构：

<div class="container">
	<div class="left">leftdiv>
	<div class="middle">middlediv>
	<div class="right">rightdiv>
div>
1
2
3
4
5

css样式：

div {
    height: 100px;
}

.left {
    float: left;
    width: 200px;
    background-color: red;
}

.middle {
    float: left;
    width: calc(100% - 400%);
    background-color: green;
}

.right{
    float: left;
    width: 200px;
    background-color: blue;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

这是浏览器缩放100%的效果图：

只有到500%的时候才能显示中间栏来：

2、浮动float+margin负值

核心思想：利用浮动的方式，为左右两栏设置对应方向的浮动。中间设置左右两个方向的 margin 负值，注意这种方式，中间一栏必须放到最后。

HTML结构：

<div class="container">
	<div class="left">leftdiv>
	<div class="right">rightdiv>
	<div class="middle">middlediv>
div>
1
2
3
4
5

css样式：

div {
    height: 100px;
}

.left {
    float: left;
    width: 200px;
    background-color: red;
}

.right{
    float: right;
    width: 200px;
    background-color: blue;
}

.middle {
    margin-left: 200px;
    margin-right: 200px;
    background-color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

再次优化后：

怎么样，是不是好多了？别急，还能再优化呢！

3、定位position

核心思想：利用 绝对定位 的方式。

好处：这种实现方式的三栏 HTML 结构可以任意摆放，不用考虑先后顺序。

HTML结构：

<div class="container">
	<div class="left">leftdiv>
	<div class="right">rightdiv>
	<div class="middle">middlediv>
div>
1
2
3
4
5

css样式：

.container {
    position: relative;
}

.left {
    position: absolute;
    left: 0;
    width: 200px;
    background-color: red;
}

.right{
    position: absolute;
    right: 0;
    width: 200px;
    background-color: blue;
}

.middle {
    position: absolute;
    left: 200px;
    right: 200px;
    background-color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这是最终100%的效果图：

500%的时候就找不到中间栏了：

缩放到25%的时候中间栏就长得不像话了：

其实还有很多布局方法，例如：网格布局、圣杯布局等等，我就不再列举了。另外，不知道朋友们发现没有，像这样的三栏布局和响应式设计似乎有着异曲同工之妙呀！

💖别吃霸王餐💖

最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发💖💖💖。