浮動會導致空的div消失 - 爲什麼？

更新：這裏的jsfiddle鏈接http://jsfiddle.net/truBB/浮動會導致空的div消失 - 爲什麼？

我使用PHP創建一系列的div數據顯示：

function supp_data_div($state_id) { 
    $data_value_array = get_supp_data(get_page_id(), $state_id); 

    $return_div = '<div id="supp_data'.$state_id.'" class="supp_data">'; 
    $is_percent = get_supp_data_type(get_page_id()); // returns '%' if true 


    for($i=0; $i < sizeof($data_value_array); $i++) { 
     $data_pair = $data_value_array[$i]; 
     $data_name = $data_pair[0]; 
     $data_value = $data_pair[1]; 
     if ($is_percent) 
      $bar_chart = '<div class="bar-chart" width="'.$data_value.'"></div>'; 
     $return_div = $return_div.'<div class="supp-data-item"><div class="supp-data-left">'.$data_name.'</div><div class="supp-data-right">'.$bar_chart.'<div class="data-item">'.$data_value.$is_percent.'</div>'.'</div></div>'; 
    } 
    $return_div = $return_div.'</div>'; 

    return $return_div; 

}

我想爲我的$ data_value我的$ bar_chart後直接顯示出來像這樣：

||||||||||||我上面的。數據項級$ data_value

以我目前的CSS的.bar線圖顯示出來。如果我添加float:left到.bar-chart，.bar-chart完全消失。

CSS：

.supp_data { 
    position: absolute; 
    top: 18px; 
    right: 8px; 
    width: 250px; 
    height: 250px; 
    z-index: 9999; 
    background-color: white; 

    display: none; 

    padding: 10px 10px 10px 10px; 


    border: 3px solid #888; 
    -moz-box-shadow: 0 0 10px #4e4747; 
    -webkit-box-shadow: 0 0 10px #4e4747; 
    box-shadow: 0 0 10px #4e4747; 

    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; /* future proofing */ 
    -khtml-border-radius: 10px; /* for old Konqueror browsers */ 
} 

.supp-data-item { 
    display: block; 
    clear: both; 
} 

.supp-data-left { 
    text-align: right; 
    float: left; 
    width: 120px; 
    padding-bottom: 5px; 
    padding-right: 5px; 
    border-right: 1px solid #999; 
} 

.supp-data-right { 
    float: left; 
    font-weight: bold; 
    margin-left: 4px; 
    padding-left: 8px; 
    padding-bottom: 5px; 
    padding-right: 5px; 
    margin-top: 0 auto; 
    margin-bottom: 0 auto; 
    vertical-align: middle; 
    display: table-cell; 

} 

.bar-chart { 
    height: 14px; 
    background-color: $dark-grey; 

} 

.data-item { 
    float: left; 
}

來源

2012-06-12 chris_mac

在這一行...'$ bar_chart = '

';'你沒有使用CSS樣式設置寬度。這可能會拋出一些東西。將其更改爲'$ bar_chart =「

」;' – Funktr0n

進行了更改，但它並沒有解決的事情。好點，但。 –

如果你能在一個的jsfiddle把靜態示例在一起，這將有助於診斷 – Funktr0n

好吧，我複製你的CSS到小提琴和.supp_data刪除display:none;。然後我加入float:left;到.bar-chart和固定background-color: $dark-grey財產，一切似乎正常行爲。

你可以在這裏看到：jsfiddle.net/truBB/3

來源

2012-06-12 03:01:10 Funktr0n

浮動會導致空的div消失 - 爲什麼？

回答

相關問題