Question

我正在使用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-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复制到了小提琴中，并从display:none;中删除了.supp_data。然后我将float:left;添加到.bar-chart并修复了background-color: $dark-grey属性，所有内容似乎都正常运行。

您可以在此处查看：jsfiddle.net/truBB/3

浮动导致空div消失 - 为什么？

1 个答案: