Question

我想在颜色位置使用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>

Answer 1

您可以在一个大div中将两个分区（宽度为30％，另一个宽度为70％）划分为任意宽度，然后分别给它们分配背景色。另外，如果您想在其中插入一个文本，则可以在其他两个div的前面放置另一个div，并使其z-index大于其他div。

Answer 2

<!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 text.</p>

</body>

</html>

Answer 3

这是一个垂直分部的

.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>

运行并尝试

如何使用CSS在垂直方向上将div颜色分为30％和70％的不同颜色

3 个答案: