vue界面上下左右四等分

最新推荐文章于 2024-03-06 23:18:03 发布

oleaginous hypocrisy

最新推荐文章于 2024-03-06 23:18:03 发布

阅读量2.1k

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/hate_programming/article/details/126408552

版权

赋值粘贴即可使用

效果图：
在这里插入图片描述

源码：

<template>
  <div class="pro_info">
    <div class="top">
      <div class="left">
        <div class="kuang"> 
   <div style="color:white">
            你好
          </div>
        </div>
      </div>
      <div class="right">
        <div class="kuang"> 
   <div style="color:white">
            你好
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <div class="kuang"> 
   <div style="color:white">
            你好
          </div>
        </div>
      </div>
      <div class="right">
        <div class="kuang"> 
          <div style="color:white">
            你好
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style>
.pro_info {
  position: absolute;
  width: 100%;
  height: 100%;
}
.pro_info .top {
  width: 100%;
  height: 50%;
  background-color: yellow;
}
.pro_info .bottom {
  background: #d9c666;
  width: 100%;
  height: 50%;
}

.left {
  width: 50%;
  height: 100%;
  float: left;
}

.top .left {
  background-color: black;
}
.top .right {
  background-color: black;
}

.right {
  float: left;
  width: 50%;
  height: 100%;
}

.bottom .left {
  background-color: black;
}

.bottom .right {
  background-color: black;
}
.kuang{
  background-color:#262626;
  width: 96%;
  height: 96%;
  margin: 2%;
  border-radius: 20px;
}
</style>