Question

我正在尝试设置容器div及其中所有孩子div's的背景颜色，但由于某些原因我无法让它工作，我不确定是哪里出错了。

当我在容器上设置background-color和边框时，您可以看到它实际上并不是＆＃34;包含＆＃34;任何儿童元素。

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

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

Answer 1

将overflow: hidden添加到#facility_container，#facility_general_info，#facility_section_info

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

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

Answer 2

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

根据Jon Ducket in his book HTML & CSS的建议：
将容器div的overflow属性设置为auto，将其width属性设置为100％。

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

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

HTML容器没有正确设置子级div

2 个答案: