php - Float 导致空的 div 消失 - 为什么？

Question

更新:JSFiddle 链接在这里 http://jsfiddle.net/truBB/

我正在使用 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 之后:

|||||||||||| $数据值

使用我当前的 CSS .bar-chart 显示在我的 .data-item 类之上。如果我将 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;
}  

Answer 1

好的，我将您的 CSS 复制到 Fiddle 中，并从 .supp_data 中删除了 display:none;。然后我将 float:left; 添加到 .bar-chart 并修复了 background-color: $dark-grey 属性，一切似乎都是表现正常。

你可以在这里看到:jsfiddle.net/truBB/3