VUE中两种不同颜色的背景

Posted 2023-02-16

【中文标题】VUE中两种不同颜色的背景

【英文标题】：Backgroud with two different color in VUE

【发布时间】：2021-11-14 07:57:23

【问题描述】：

我是第一次学习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>

enter image description here

【问题讨论】：

尝试将display:flex 添加到主div

非常感谢@Dineshkarthik

【参考方案1】：

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

.main
  display : flex;

【讨论】：

非常感谢，卡在这里很久了，非常感谢