主分部背景顏色沒有出現在分Div

我有一個問題。我給了三個DIV。首先是主要的，另外兩個是小孩。在兩個孩子中，一個孩子是左側，一個孩子是右側。我給了主要的div背景顏色爲白色，但它沒有出現在兩個孩子的背景顏色上。主分部背景顏色沒有出現在分Div

簡單，我想主div背景顏色應該出現在子div上，只要主div接近即可。下面是我的代碼

<div style="background-color:#FFFFFF;"> 
Its showing here only white color 

<div style="width:250px; float:left; padding:10px;"> 
<p>hello its sam </p> 
<p>hello its sam </p> 
<p>hello its sam </p> 
<p>hello its sam </p> 
<p>hello its sam </p> 
</div> 

<div style="width:660px; border-left: 1px solid #CCC; padding:10px; float:right;"> 
<p>Yes its sam</p> 
<p>Yes its sam</p> 
<p>Yes its sam</p> 
<p>Yes its sam</p> 
<p>Yes its sam</p> 
</div> 

</div> 

</body>

來源

2014-09-04 user3477550

嘗試將「overflow：auto」添加到具有背景顏色的項目的CSS中。浮動有時不能按照你想要的方式工作。 – Jhecht 2014-09-04 07:11:45

您應該清除浮游物。 – Ruddy 2014-09-04 07:12:23

你需要清除浮動。

浮點數後面加上這一行就可以解決問題。

<div style="clear: both;"></div>

新的HTML：

<div style="background-color:#FFFFFF;">Its showing here only white color 
    <div style="width:250px; float:left; padding:10px;"> 
     <p>hello its sam</p> 
     <p>hello its sam</p> 
     <p>hello its sam</p> 
     <p>hello its sam</p> 
     <p>hello its sam</p> 
    </div> 
    <div style="width:660px; border-left: 1px solid #CCC; padding:10px; float:right;"> 
     <p>Yes its sam</p> 
     <p>Yes its sam</p> 
     <p>Yes its sam</p> 
     <p>Yes its sam</p> 
     <p>Yes its sam</p> 
    </div> 
    <div style="clear: both;"></div> 
</div>

Demo Here

瞭解更多關於花車和清除它們here。

你也可以使用溢出，我只需要使用clear: both;。

Demo Using Overflow Here

注：我已經做了內嵌樣式來滿足你的代碼

來源

2014-09-04 07:14:26 Ruddy

感謝您的回覆... – user3477550 2014-09-04 07:28:44

沒問題，任何問題隨時問。 – Ruddy 2014-09-04 07:29:27

可以節省開支一個div過，你有兩種可能性：

添加溢出：隱藏於母公司div（帶背景顏色）

結果html：

<div style="background-color:#FFFFFF; overflow:hidden"> 
    Its showing here only white color 
    <div style="width:250px; float:left; padding:10px;"> 
     <p>hello its sam </p> 
     <p>hello its sam </p> 
     <p>hello its sam </p> 
     <p>hello its sam </p> 
     <p>hello its sam </p> 
    </div> 
    <div style="width:660px; border-left: 1px solid #CCC; padding:10px; float:right;"> 
     <p>Yes its sam</p> 
     <p>Yes its sam</p> 
     <p>Yes its sam</p> 
     <p>Yes its sam</p> 
     <p>Yes its sam</p> 
    </div> 
</div>

結果Jsfiddle

或者你可以添加一個「clearfix」類 - - 更多的.cf短

 /** 
    * For modern browsers 
    * 1. The space content is one way to avoid an Opera bug when the 
    * contenteditable attribute is included anywhere else in the document. 
    * Otherwise it causes space to appear at the top and bottom of elements 
    * that are clearfixed. 
    * 2. The use of `table` rather than `block` is only necessary if using 
    * `:before` to contain the top-margins of child elements. 
    */ 
    .cf:before, 
    .cf:after { 
     content: " "; /* 1 */ 
     display: table; /* 2 */ 
    } 

    .cf:after { 
     clear: both; 
    } 

    /** 
    * For IE 6/7 only 
    * Include this rule to trigger hasLayout and contain floats. 
    */ 
    .cf { 
     *zoom: 1; 
    }

解釋here

而你只添加CF類主DIV 。

來源

2014-09-04 07:22:59 AlexDom

主分部背景顏色沒有出現在分Div

回答

相關問題