1

如果我为包含设置了 display:inline-block 的 div 的 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/

4

3 回答 3

1

内部 div 是浮动的，因此您需要清除浮动。

一个非常简单的方法是将溢出：隐藏到包装元素。演示

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

然而，一个安全的方法是给

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

在包装元素的末尾

于 2012-04-08T08:23:09.340 回答
0

两个答案都是正确的。

@Starx 的答案有一个优势，即不需要触摸原始 CSS，并且 float:left 有助于保留 HTML 源代码格式，通过使用 display:inline-block 可以对空白敏感。

但是，原始问题中的 float: left 是多余的，因为 OP 不知道 display: inline-block 的空白敏感性，所以@“Mr Lister”的答案也是正确的。

在这种特殊情况下，不需要更一般的答案＃1，因为 float:left 是多余的。

于 2012-04-08T21:28:00.863 回答
0

如果您只是float:left从内部 div （以及它们之间的空格）中删除，您会得到http://jsfiddle.net/d6bM6/2/
但如果这也不是您想要的，您应该创建一个屏幕截图来说明您的操作方式想让它看起来。

于 2012-04-08T08:47:38.157 回答