HTML容器没有正确设置子div的样式

I am trying to set the background color of my container div and all child div's within it but I can't get it to work for some reason, and I am unsure as to where I am going wrong.

我试图设置我的容器div的背景颜色和其中的所有子div,但由于某种原因我不能让它工作,我不确定我哪里出错了。

When I set the background-color and a border on the container you can see that it is not actually "containing" any child elements.

当我在容器上设置背景颜色和边框时,您可以看到它实际上并不“包含”任何子元素。

#facility_container{
    text-align: center;
    padding: 2px;
    width: 100%;
    background-color: #ffffff;
}

Here is a JSFiddle demonstrating where I am at so far.

这是一个JSFiddle,展示了我到目前为止所处的位置。

2 个解决方案

#1

Add overflow: hidden to #facility_container, #facility_general_info, #facility_section_info

添加溢出:隐藏到#facility_container,#facility_general_info,#facility_section_info

Float makes the inner divs not expand the outer ones. Using table settings to style your page is a big no-no in HTML5.

浮动使内部div不扩展外部div。在HTML5中使用表格设置来设置页面样式是一个很大的禁忌。

working jsfiddle: https://jsfiddle.net/nayish/docg128w/8/

工作jsfiddle:https://jsfiddle.net/nayish/docg128w/8/

#2

The issue here is that, since your #facility_info divs are floated, they are taken out of the normal element flow, and therefore do not affect the width or height of the #facility_container div.

这里的问题是,由于你的#facility_info div被浮动,它们被从正常的元素流中取出,因此不会影响#facility_container div的宽度或高度。

As suggested by Jon Ducket in his book HTML & CSS:
Set the container div's overflow property to auto, and its width property to 100%.

正如Jon Ducket在他的书HTML&CSS中所建议的:将容器div的overflow属性设置为auto,将其width属性设置为100%。

#facility_container {
    text-align: center;
    padding: 2px;
    width: 100%;
    background-color: #ffffff;
    width: 100%;
    overflow: auto;
}

In this case, since #facility_general_info already takes up width and height, it is not necessary to set #facility_container's width to 100%, but the above-mentioned property values can be used for elements that contain only floated elements.

在这种情况下,由于#facility_general_info已占用宽度和高度,因此不必将#facility_container的宽度设置为100%,但上述属性值可用于仅包含浮动元素的元素。

#1