时间戳

首页 > 解决方案 > 将块 B 的内容扩展到块 A

css - 将块 B 的内容扩展到块 A

问题描述

我有一个类red，宽度是60%，我想在这个块中放入另一个以green宽度 命名的类70%。

我的问题是，在显示中，背景颜色比背景颜色green小red，我不明白为什么？！

.container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100px;
}

.red {
  background-color: red;
  width: 60%;
  height: 50%;
}

.green {
  background-color: green;
  width: 70%;
  height: 50%;
}
  <div class="container">
    <div class="red">
      <div class="green">
      </div>
    </div>
  </div>

标签： css

解决方案

理解问题

green class是孩子的，red class这意味着宽度green将是70 %其中red是60%container

让我们做一些数学 -

容器- 100% -假设宽度 x

红色- 容器的 60% - 0.6x

绿色-70% 红色 - 0.42x

我们都知道0.42x < 0.6x

解决方案

使red和green班二分开div。

.container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100px;
}

.red {
  background-color: red;
  width: 60%;
  height: 50%;
}

.green {
  background-color: green;
  width: 70%;
  height: 50%;
}
<div class="container">
    <div class="red"></div>
    <div class="green"></div>  
</div>

推荐阅读