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 に答える