为什么不显示第二个div的背景图像？

Question

这是我试图实现

的原型

到目前为止，这是JsFiddle： JS Fiddle

我要做的是做出选择 - 选择支出配置文件，找到合适的卡片等，有背景颜色。我尝试从所有这些选项所在的div中执行此操作。这是我的代码（来自JS Fiddle）这样做

#options {
      margin-top:20px;
      background-image: url("http://i.imgur.com/EuMb532.png");
}

出于某种原因，使用相同的背景图片链接，标题div能够获取背景颜色，但我的第二个div（包含所有选项）是不能的。

我知道这不是指定类问题，因为我检查了CSS Class上的语法，而不是背景图片的问题，因为它使用了div标头，我检查了{{3上的语法}}

有谁知道为什么第二个div没有显示背景颜色？

Answer 1

#options内部的.To_Left跨度向左浮动，而#options没有被设置为包含它们，因此它们突破了#options并且#options没有高度。

在#options中添加“overflow：hidden”（可能还有底部边距）会使背景显示出来。

Answer 2

您可能必须删除float属性并使用inline-block，如下所示：

.To_Left {
text-align:center;
display:inline-block;
width:25%;
}

DEMO

要注意的一件事是，如果您决定将inline-block用于您的商品;请确保删除HTMl中的任何额外空格，否则width:25%;将无法正常工作，因为您的内容将加起来超过100％。