html - 如何正确添加嵌套div

Question

对于 UI 设计(好吧，我不是设计师)，我将一个 div 分成不同的区域，对应于 subdivs。第一个是:

这是我的 jsfiddle但我在这里介绍我的代码:

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

但我也对resultados进行了切片:

<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 以识别它们。但是，我无法让内部 div 获得其自定义颜色，因为它们的外部 div 分配的 background-color 仍然存在。

我该如何解决？

Answer 1

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

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

如果您想给它们自己的背景色，请使用 background-color而不是 color，例如

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

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

顺便说一句:float 没有top 或bottom 值，因此您应该删除它们。

jsFiddle example