2015-01-05 3 views
2

I가 내가CSS : 플로트 절대 왼쪽 위치

.barGraph li { 
    position: absolute; 
    } 

이 막대는 더 이상 떠와 같이 판명되지 않는 추가 CSS enter image description here

.barGraph { 
    background: url(images/horizontal_grid_line_50_pixel.png) bottom left; 
    border-bottom: 3px solid #333; 
    height: 500px; 
    margin: 1em 0; 
    padding: 0; 
    position: relative; 
    } 

.barGraph li { 
    background: #666 url(images/bar_50_percent_highlight.png) repeat-y top right; 
    border: 1px solid #555; 
    border-bottom: none; 
    bottom: 0; 
    color: #FFF; 
    margin: 0; 
    float: left; 
    padding: 0 0 0 0; 
    list-style: none; 
    text-align: center; 
    width: 39px; 
    } 

로 만든이 막대 그래프 : enter image description here 이런 식으로 할 수있는 방법이 있습니까? enter image description here

HTML :

<ul class="barGraph">    
    <li class="set1" style="height: 57px;">57</li> 
    <li class="set1" style="height: 154px;">154</li> 
    <li class="set1" style="height: 99px;">99</li> 
    <li class="set1" style="height: 57px;">57</li> 
</ul> 
+0

에 목록 항목을 설정 @Sompuperoo는 :) – Mae

+0

위치를 추가 : 위, 아래, 왼쪽을 사용합니다 절대 오른쪽 위치로,이 뜨지 않습니다. 그것을 설정하기 위해 JS가 필요하다 : -xxx; 여기서 xxx는 막대의 높이입니다 – tom10271

답변

3

플로트 : 왼쪽 위치 : 이해가되지 않습니다 함께 절대. 대신, display:inline-block;vertical-align:bottom;

jsFiddle example

+0

"플로트 : 왼쪽 및 위치 : 함께 절대적으로 의미가 없습니다"+1 –