Float은 빈 div를 사라지게합니다 - 왜?

UPDATE : 여기 JSFiddle 링크 http://jsfiddle.net/truBB/Float은 빈 div를 사라지게합니다 - 왜?

I 데이터 표시 div의 일련의 생성 PHP를 사용하고 있습니다 : 내 $의 DATA_VALUE 내 $의 bar_chart 후 직접 표시하는

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

내 현재 CSS .bar-chart는 내. 데이터 항목 클래스 위에 나타납니다. 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

Float은 빈 div를 사라지게합니다 - 왜?

답변

관련 문제