为什么第二个 div 的背景图片没有显示？

Question

这是我要实现的原型

这是我目前所拥有的 JsFiddle： JS Fiddle

我想做的是让 options-Pick 成为支出资料、为我找到合适的卡片等具有背景颜色。我尝试从 div 执行此操作，所有这些选项都在其中。这是我的代码（来自 JS Fiddle）这样做

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

出于某种原因，使用相同的背景图像 link，header div 能够拾取背景颜色，但我的第二个 div（包含所有选项）无法。

我知道这不是一个特定的 class 问题，因为我在 CSS Class and not an issue with the background image because it worked with the div header and I checked my syntax on CSS Background.

上检查了我的语法

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

Answer 1

#options 中的 .To_Left 跨度向左浮动，#options 的样式没有包含它们，因此它们脱离了#options 并留下没有高度的#options。

在#options 中添加“溢出：隐藏”（可能还有底部边距）将使背景显示出来。

Answer 2

您可能必须删除浮动属性并使用内联块，如下所示：

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

DEMO

需要注意的一件事是，如果您决定对您的项目使用 inline-block；请务必删除 HTMl 中任何多余的白色-space，否则 width:25%; 将不起作用，因为您的内容加起来将超过 100%。

为什么第二个 div 的背景图片没有显示？

Why isn't background image for second div showing?

html

css

user-interface

prototype

jsfiddle