时间戳

首页 > 解决方案 > VUE中两种不同颜色的背景

css - VUE中两种不同颜色的背景

问题描述

我是第一次学习VUE，想做一个页面。在这里我想设置两个不同的颜色在同一页的左右连接相同的高度，但我得到的是不同的，除非我在右边添加内容

我尝试位置是相对的，浮动是左右的，它不起作用

而且我不想使用渐变色并使用 ::before 或 ::after

<template>
  <div class="a">
    <div class="b">
      <div class="v1">
        <img src="../assets/v.png"/>
      </div>
      <div class="v2">
          <img src="../assets/v.png"/>
      </div>
      <div class="v3">
          <img src="../assets/v.png"/>
      </div>
      <div class="v4">
          <img src="../assets/v.png"/>              
      </div>
    </div>

    <div class="c">
      <div class="v5">
        <img src="../assets/v.png"/>  
      </div>
      <div class="v6">
        <img src="../assets/v.png"/> 
      </div>
    </div>
  </div>
</template>

<style>
  .a{
    margin: 0%;
    /* background: linear-gradient(top, red ,red 50%,blue 50%,blue); */
  }
  .b{
    float: left;
    background-color: antiquewhite;
    width: 30%;
    height: 100%;
  }
  .c{
    float: left;
    background-color:red;
    width: 70%;
    height: 100%;
  }

</style>

在此处输入图像描述

标签： cssvue.jsvuejs2

解决方案

您必须像这样为 .main 设置显示：

.main{
  display : flex;
}

推荐阅读