无法设置背景颜色

Question

我无法设置#widgetContainer div的背景颜色。我想知道是否有一种方法来对齐div，以便在浮动元素时遗漏的空白空间可以最小化？

我的小提琴：jsfiddle.net/rLzb0caq

Answer 1

将#widgetContent课程更改为

#widgetContent {
    background: none repeat scroll 0 0 #CCC;
    height: 50%;
    margin: 0 auto;
    outline: 2px solid black;
    width: 50%;
}

Answer 2

在关闭#widgetContainer的标签之前插入此标签：

<span style="clear: both; display: block;"></span>

这将清除元素的浮动。

Answer 3

如果您只想将背景颜色添加到widgetContainer div，请将overflow:hidden添加到#widgetContainer

＆＃13;

＆＃13;

#widgetContent {
  height: 50%;
  width: 50%;
  margin: 0 auto;
  border: 3px groove solid red;
  outline: 2px solid black;
}
#widgetHead {
  width: 100%;
  height: 40px;
  margin: 0 auto;
  background-color: gray;
}
#widgetContainer {
  height: 100%;
  width: 100%;
  background: gray;
  color: black;
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
#widgetContainer > div {
  float: left;
  width: 31%;
  min-height: 75px;
  margin: 1%;
  -webkit-box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
  box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
  border: 0.25% solid;
}
#widgetContainer > div div {
  width: 80%;
  min-height: 75px;
  padding: 1%;
  margin: 2% auto;
  overflow: auto;
  -webkit-box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
  box-shadow: 6px -7px 12px -1px rgba(0, 0, 0, 0.5);
  border: 0.25% solid black;
}
.clean {
  margin-bottom: 20px;
  clear: both;
}

＆＃13;

<div id="widgetContent">

  <div id="widgetHead">
    widgetData
  </div>
  <div id="widgetContainer">


    <div id="node1" style="background-color: red;">
      node1
      <div id="vip1" style="background-color: red;">
        vip1
        <div id="obj1" style="background-color: gray;">
          obj1
        </div>
        <div id="obj2" style="background-color: green;">
          obj2
        </div>
        <div id="obj3" style="background-color: green;">
          obj3
        </div>
      </div>
      <div id="vip2" style="background-color: blue;">
        vip2
      </div>
    </div>
    <div id="node2">
      node2
      <div id="vip1" style="background-color: green;">
        vip1
      </div>
      <div id="vip2" style="background-color: green;">
        vip2
      </div>
    </div>
    <div id="node3" style="background-color: red;">
      node3
    </div>
    <div id="node4" style="background-color: red;">
      node4
    </div>
    <div id="node5" style="background-color: red;">
      node5
    </div>
    <div id="node6" style="background-color: red;">
      node6
    </div>
    <div id="node7" style="background-color: red;">
      node7
    </div>
    <div id="node8" style="background-color: red;">
      node8
    </div>
    <div id="node1" style="background-color: red;">
      node1
      <div id="vip1" style="background-color: red;">
        vip1
        <div id="obj1" style="background-color: gray;">
          obj1
        </div>
        <div id="obj2" style="background-color: green;">
          obj2
        </div>
        <div id="obj3" style="background-color: green;">
          obj3
        </div>
      </div>
      <div id="vip2" style="background-color: blue;">
        vip2
      </div>
    </div>
  </div>
  <div class="clean cf">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您的#widgetContainer没有高度，因为所有元素都是浮动的。您应该设置#widgetContent的背景颜色，以获得所需的结果。

#widgetContent {
    height: 50%;
    width: 50%;
    margin: 0 auto;
    border: 3px groove solid red;
    outline: 2px solid black;
    background-color:yellow;
}

http://jsfiddle.net/inuya5ha/8ef7Lsvt/