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

文章目录

💖别吃霸王餐💖

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

🎉🎉Welcome to my blog!🎉🎉

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

实现三栏布局的3种方法

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

1、浮动float+cac()

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

HTML结构：

left
middle
right
 
 

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;
 }

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

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

2、浮动float+margin负值

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

HTML结构：

left
right
middle
 
 

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;
 }
 

再次优化后：

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

3、定位position

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

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

HTML结构：

left
right
middle
 
 

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;
 }
 

这是最终100%的效果图：

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

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

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

💖别吃霸王餐💖

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