Vue中集中常见的布局方式

  • 布局叠加
  • 完整代码
  • 最外层的Container设置为relative,内部的几个box设置为absolute
js 复制代码
<template>
  <div class="container">
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
  </div>
</template>

<script>
export default {
  // 组件逻辑
};
</script>

<style scoped>
.container {
  position: relative;
  width: 300px;
  height: 300px;
  background: #888888;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.box1 {
  background-color: red;
  top: 50px;
  left: 50px;
}

.box2 {
  background-color: blue;
  top: 100px;
  left: 100px;
}

.box3 {
  background-color: green;
  top: 150px;
  left: 150px;
}
</style>
  • 如果Container不设置relative则,内部的box则会相对整个页面进行布局
  • 使用绝对布局,一个居中,一个居右。
  • 其中box1,左上距离父布局50%,然后自身偏移50%,使其居中
js 复制代码
.box1 {
  background-color: red;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
  • 完整代码
js 复制代码
<template>

  <div class="container">
    <div class="box box1">Box 1</div>
    <div class="box box3">Box 3</div>
  </div>

</template>

<script>
export default {
  // 组件逻辑
};
</script>

<style scoped>
.container {
  position: relative;
  width: 300px;
  height: 300px;
  background: #888888;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.box1 {
  background-color: red;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.box3 {
  background-color: green;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
</style>
  • 水平方向线性布局
  • 设置父布局 display: flex; flex-direction: row;子布局取消position: absolute;即可
js 复制代码
.container {
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 300px;
  background: #888888;
}

.box {
  //position: absolute;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
相关推荐
y先森13 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy13 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891116 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
天天进步20153 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js