background - 周围的 DIV 背景颜色和内联 block

Question

如果我为包含设置了 display:inline-block 的 div 设置背景颜色，则不会使用背景颜色。

下面的 JSFiddle 链接。

考虑这个片段:

CSS:

.divisionOutputArea {
  background-color: yellow;
}
.divisionColumn[data-division=true][data-boxed=true] {
  border: 1px solid black;
  display: inline-block;
  float: left;
}
.divisionColumn[data-division=true] {
  display: inline-block;
  float: left;
}
.divisionColumn[data-result=true] {
  display: inline-block;
  float: left;
}

还有这个 HTML:

<div class="divisionOutputArea">
    <div class="divisionColumn" data-division="true" data-boxed="true">
        1<br /><br /><br /><br /><br />
    </div>
    <div class="divisionColumn" data-division="true" data-boxed="true">
        2<br />2<br /><br /><br /><br />
    </div>
    <div class="divisionColumn" data-division="true" data-boxed="true">
        3<br />3<br />3<br /><br /><br />
    </div>
    <div class="divisionColumn" data-division="true" data-boxed="true">
        1<br /><br />1<br />1<br /><br />
    </div>
    <div class="divisionColumn" data-division="true" data-boxed="true">
        2<br /><br /><br />2<br />2<br />
    </div>
    <div class="divisionColumn" data-result="true">
        :<br /><br /><br /><br /><br />
    </div>
    <div class="divisionColumn" data-result="true">
        5<br /><br /><br /><br /><br />
    </div>
    <div class="divisionColumn" data-result="true">
        =<br /><br /><br /><br /><br />
    </div>
    <div class="divisionColumn" data-result="true">
        2<br /><br /><br /><br /><br />
    </div>
    <div class="divisionColumn" data-result="true">
        4<br /><br /><br /><br /><br />
    </div>
    <div class="divisionColumn" data-result="true">
        6<br /><br /><br /><br /><br />
    </div>
    <div class="divisionColumn" data-result="true">
        2<br /><br /><br /><br /><br />
    </div>
</div>

我想渲染<div class="divisionOutputArea">[Contained divs as of example]</div>的已用区域的背景例如黄色。

在 FF11 和 Webkit 上试过。跨浏览器不是问题。

不工作: http://jsfiddle.net/8BVZB/

有些工作，但不是我想要的: http://jsfiddle.net/d6bM6/

Answer 1

内部 div 是 float 的，所以你需要清除 float 。

一个非常简单的方法是将 overflow: hidden 赋给包装元素。 Demo

.divisionOutputArea {
  background-color: yellow;
  overflow: hidden;
}

但是，一个安全的方法是给予

<div style="clear: both;"></div>

在包装元素的末尾