如何使用css将div颜色与垂直30％的不同颜色和70％的不同颜色分开[重复]答案

【问题标题】：How to divide div color with 30% different color and 70% different color in vertical using css [duplicate]如何使用css将div颜色与垂直30％的不同颜色和70％的不同颜色分开[重复]
【发布时间】：2018-09-19 04:09:32
【问题描述】：

我想在颜色位置使用 css 设计具有两种颜色划分的 div 标签 div 垂直分割

<!DOCTYPE html>
<html>

<body>
  <style>
    .layout {
      background-color: lightblue;
      height: 70px;
      width: 70px;
      padding: 30px;
    }
  </style>

  <div class="layout">

  </div>

  <p>This is some text.</p>

</body>

</html>

【问题讨论】：

您可以点击此链接，使用 liner-gradient 方法在一个 div 中应用多种颜色。 Multi-Background-color of Single Div

标签： html css

【解决方案1】：

您可以在一个大 div 中放置两个分区，一个宽度为 30%，另一个为宽度：70%，您喜欢任意宽度，并为它们分配不同的背景颜色。此外，如果你想在它们中间放置一个文本，你可以在其他两个 div 前面放置另一个 div，并使其 z-index 比其他 div 更多。

【讨论】：

【解决方案2】：

这个是垂直div的

.parent {
  height:200px;
  width:100px
}
.childA {
  width:100%;
  background-color:#0f0;
  height:30%
}
.childB {
  width:100%;
  background-color:#f00;
  height:70%
}

<div class="parent">
    <div class="childA">
    </div>
    <div class="childB">
    </div>
</div>

这是用于水平 DIV 的

.parent {
    height:200px;
    width:500px
}
.childA{
  float:left;
  width:30%;
  background-color:#0f0;
  height:200px
}
.childB {
  float:right;
  width:70%;
  background-color:#f00;
  height:200px
}

<div class="parent">
      <div class="childA">
      </div>
      <div class="childB">
      </div>
</div>

运行并尝试一下

【讨论】：

【解决方案3】：

<!DOCTYPE html>
<html>

<body>
  <style>
    .layout {
      height: 70px;
      width: 70px;
    }
    .a {
      width: 100%;
      height: 30%;
      background-color: lightblue;
    }
    .b {
      width: 100%;
      height: 70%;
      background-color:red;
     }
  </style>

  <div class="layout">
      <div class="a"></div>
      <div class="b"></div>
  </div>

  <p>This is some random text.</p>

</body>

</html>

【讨论】：