股利不顯示全高

Question

我有一個HTML文件

<div class="ads_list_admin"> 
{$dlt_msg} 

    {foreach name = fe1 item = k from = $all_ads} 
     <div class="ads_i_admin"> 

      <div class="ads_own"> 
       {$k->ad_owner} 
      </div> 
      <div class="ads_plc"> 
       {$k->ad_place} 
      </div> 
      <div class="ads_own"> 
       <a href="{$path_site}{$index_file}?menu=rm_ads&cmd=rmads"> 
        Delete 
       </a>  
      </div> 
     </div> 
    {/foreach} 
</div> 

而對於DIV的CSS是：

.ads_list_admin 
{ 
    width:560px; 
    padding:10px 12px 10px 15px; 
    background:#cdc; 
} 
.ads_i_admin 
{ 
    width:540px; 
    clear:both; 
    margin:10px; 
    color:#666666; 
    font-family:Arial; 
    font-size:13px; 
} 
.ads_own 
{ 
    width:120px; 
    float:left; 
    padding:8px 6px 8px 6px; 
} 
.ads_plc 
{ 
    padding:8px 6px 8px 6px; 
    width:220px; 
    float:left; 
} 

但我的DIV高度不充分。這意味着div的背景顏色沒有完全顯示。這裏有什麼問題？

Answer 1

需要清除花車，最簡單的辦法是給父容器overflow:hidden

一個更好的辦法是使用這個明確的修復技術，給父容器cf類：

/* For modern browsers */ 
.cf:before, 
.cf:after { 
    content:""; 
    display:table; 
} 

.cf:after { 
    clear:both; 
} 

/* For IE 6/7 (trigger hasLayout) */ 
.cf { 
    zoom:1; 
} 

Answer 2

問題是float: left在你最內層的div上。計算元素的高度時會忽略浮動內容。

因爲無論如何一切都是固定寬度，請嘗試用display: inline-block替換float: left。這也可能是「確定」的情況 - 最好甚至是 - 使用表格，因爲它看起來像表格數據。