Question

如果我为包含显示的div的div设置背景颜色：inline-block set，则不使用背景颜色。

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是浮动的，所以你需要清除浮动。

一种非常简单的方法是给包裹元素隐藏溢出：隐藏。 Demo

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

然而，安全的方法是给予

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

在包装元素的末尾

Answer 2

如果您只是从内部div（以及它们之间的空格）中删除float:left，则会得到http://jsfiddle.net/d6bM6/2/
但如果这不是你想要的，你应该创建一个你想要它的样子截图。

Answer 3

两个答案都是正确的。

@Starx的答案有一个优点，即不需要触摸原始CSS，而float：left有助于保留HTML源代码格式，通过使用display：inline-block得到空白敏感。

然而，原始问题中的浮动：左边是多余的，因为OP不知道显示的空白敏感度：内联块，所以@“李斯特先生”的答案也是正确的。

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

周围的DIV背景颜色和内联块

3 个答案: