HTML容器沒有造型子div正確

我想設置我的容器div和所有子div's的背景顏色，但我不能讓它工作出於某種原因，我不確定我在哪裏出錯了。HTML容器沒有造型子div正確

當我在容器上設置background-color和邊框時，可以看到它實際上並不包含任何子元素。

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

這是一個JSFiddle展示我到目前爲止的位置。

來源

2015-05-12 Zoxac

您需要清除浮動元素，或者根本不使用浮動元素。 –

@BrianGlaz我將如何清除浮動元素？ – Zoxac

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

浮動使得內部的div不會擴展外的。使用表格設置來設置頁面風格是HTML5中的一大難題。

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

來源

2015-05-12 18:49:20 Nayish

這裏的問題是，由於你的#facility_info的div是浮動的，它們被取出正常元素流，因此不會影響的寬度或高度#facility_container div。

如Jon Ducket in his book HTML & CSS所示：
將容器div的溢出屬性設置爲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％，但上述的屬性值可以是用於僅包含浮動元素的元素。

來源

2015-05-12 18:57:30

HTML容器沒有造型子div正確

回答

相關問題