0

更新：这里的 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 之后，如下所示：

||||||||||||| $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;
}
4

1 回答 1

1

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

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

于 2012-06-12T03:01:10.550 回答