前端vue实现双飞翼布局【flex布局和浮动布局】
2023-09-27 14:27:10 时间
有志者事竟成,破釜沉舟百二秦关终属楚
苦心人天不负,卧薪尝胆三千越甲可吞吴。
📌博主介绍
💒首页:水香木鱼
🛫专栏:邂逅CSS
✍简介: 博主姓:陈,名:春波。花名 “水香木鱼”,星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”
🔰 格言: 生活是一面镜子。 你对它笑, 它就对你笑; 你对它哭, 它也对你哭。
🔋 小目标: 成为 会设计 、会开发的 “万能钥匙”
📝文章内容
本期为大家带来的是双飞翼实现
✍ 一、flex布局 推荐
- flex: 1;【针对于中间盒子使用】
- width: auto;【针对于中间盒子使用】
<template>
<div class="container">
<div class="left">左侧</div>
<div class="middle">中间</div>
<div class="right">右侧</div>
</div>
</template>
<style lang="less" scoped>
.container{
display: flex;
width: 100%;
.left, .right {
background: red;
width: 200px;
height: 200px;
}
.middle {
flex: 1;
background: blue;
width: auto;/*宽度自适应*/
height: 300px;
}
}
</style>
✍ 二、浮动布局
- float
margin-left: -100%
margin-left: -200px
<template>
<div class="container">
<div class="middle">
<div class="inner">双飞翼</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</template>
<style lang="less" scoped>
.container{
width: 100%;
.left {
float: left;
width: 200px;
height: 400px;
background-color: #42b983;
margin-left: -100%;
}
.middle {
float: left;
width: 100%;
height: 500px;
background: red;
}
.middle .inner {
margin: 0 200px;
height: 400px;
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
}
}
</style>
📢博主致谢
非常感谢小伙伴们阅读到结尾,本期的文章就分享到这里,总结了【前端vue实现双飞翼布局【flex布局和浮动布局】】,希望可以帮到大家,谢谢。
如果你觉得本篇文章有帮助到您,鼓励一下木鱼吧!点击
【关注+点赞+收藏+评论+转发
】支持一下哟
🙏您的支持就是我更新的最大动力。⭐⭐⭐记得一键三连呦!⭕
💡猜你喜欢
相关文章
- 【vue+axios】一个项目学会前端实现登录拦截
- 【转】vue+axios 前端实现登录拦截(路由拦截、http拦截)
- 【前端VUE】大文件分片上传技术资料搜集
- Vue全局过滤器的使用 运用在时间过滤 内容添加crud
- Vue学习笔记之Vue的箭头函数
- vue 过滤器 基本用法
- vue项目实战:api管理和封装
- vue 上传图片到阿里云(前端直传:不推荐)
- vue实现导入表格数据【纯前端实现】
- 前端vue实现注册功能与正则校验规则
- 前端vue实现登录前,记住密码功能案例【存储cookies与base64加密版】
- 前端获取当前系统时间/日期(vue写法)
- 前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】
- Vue技能树上线啦
- [前端学习]一文 Vue指令
- vue笔记
- 博客前端vue和豆瓣页面
- 使用vue+node搭建前端异常监控系统
- 使用vue框架开发前端项目的步骤