Question

对于UI设计（好吧，我不是设计师）我将div划分为不同的区域，对应于细分。第一个是：

这是我的jsfiddle，但我在这里介绍了我的代码：

<div id="outer">
        <div id="parametros"></div>
        <div id="resultados"></div>
</div>

但我也对结果进行了分类：

<div id="outer">
    <div id="parametros"></div>

    <div id="resultados">
        <div id="graficos">
            <div id="bars"></div>
            <div id="fx"></div>
        </div>
        <div id="loquerealmenteimporta"></div>  
    </div>

</div>

我为切片编写了这个简单的CSS：

#parametros {

  float:left;
  width: 400px;
  height: 100%;
  background-color: orange;
}

#resultados {

  float:right;
  width: 1000px;
  height: 100%;
  background-color: green;
}

      #graficos {
        float: top;
        height: 400px;
        width: 100%;
        color: yellow;
      }

      #loquerealmenteimporta {
        float: bottom;
        height: 240px;
        width: 100%;
        color: purple;
      }

并给每个div一个不同的backgorund-color来识别它们。但是，我无法让内部divs获得自定义颜色，因为其div的外部background-color仍然存在。

我该如何解决？

Answer 1

你给内部元素一个color属性 - color属性设置前景（文本）颜色，而不是背景。

除此之外，你的内部元素当前正在从它们各自的父元素继承背景颜色，这使得它看起来好像它覆盖了你的内部元素CSS。

如果您想为他们提供自己的背景色，请使用background-color代替color，例如

#graficos {
  height: 400px;
  width: 100%;
  background-color: yellow;
}

#loquerealmenteimporta {
  height: 240px;
  width: 100%;
  background-color: purple;
}

BTW：float没有top或bottom值，因此您应将其删除。

jsFiddle example

如何正确添加嵌套的div

1 个答案: