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

This is the prototype I am trying to implement 为什么不显示第二个div的背景图像？

这是我试图实现的原型

Here is JsFiddle of what I have so far : JS Fiddle

这是我到目前为止的JsFiddle:JS Fiddle

What I am trying to do is make the options-Pick a Spending Profile, Find me suitable cards, etc have a background color. I tried doing this from the div that all of these options are in. Here is my code(from JS Fiddle) for doing so

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

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

For some reason, using the same background image link, the header div was able to pick up the background color but my second div(enclosing all the options) wasn't able to.

由于某种原因,使用相同的背景图像链接,标题div能够获取背景颜色,但我的第二个div(包含所有选项)无法。

I know that this wasn't a specifying class issue because I checked my syntax on 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.

我知道这不是一个指定类问题,因为我检查了我的CSS类语法,而不是背景图像的问题,因为它与div头一起工作,我在CSS背景上检查了我的语法。

Does anyone know why the second div isn't showing the background color?

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

2 个解决方案

#1

the .To_Left spans inside #options are floated left, and #options is not styled to contain them, so they break out of #options and leave #options w/ no height.

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

Adding “overflow: hidden” (and probably a bottom margin) to #options will make the background show up.

将“溢出:隐藏”(可能是底部边距)添加到#options将使背景显示出来。

#2

You may have to remove the float property and use inline-block as follows:

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

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

DEMO

One thing to be aware of is if you decide to use inline-block for your items; be sure to remove any extra white-space in your HTMl otherwise width:25%; will not work as your contents will add up to more than 100%.

需要注意的一件事是,如果您决定对项目使用内联块;请确保删除HTMl中的任何额外空白区域,否则宽度为:25%;将无法正常工作,因为您的内容将加起来超过100%。

#1