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

发布于:2023-01-04 ⋅ 阅读:(201) ⋅ 点赞:(0)

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

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

🎉🎉Welcome to my blog!🎉🎉

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

实现三栏布局的3种方法

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

1、浮动float+cac()

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

HTML结构:

<div class="container">
	<div class="left">left</div>
	<div class="middle">middle</div>
	<div class="right">right</div>
</div>

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结构:

<div class="container">
	<div class="left">left</div>
	<div class="right">right</div>
	<div class="middle">middle</div>
</div>

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结构:

<div class="container">
	<div class="left">left</div>
	<div class="right">right</div>
	<div class="middle">middle</div>
</div>

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%的时候中间栏就长得不像话了:

在这里插入图片描述

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

💖别吃霸王餐💖

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


网站公告

今日签到

点亮在社区的每一天
去签到