CSS: Float слева и позиция абсолютного

У меня есть эта гистограмма создан с помощью CSS enter image description here CSS: Float слева и позиция абсолютного

.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; 
    }

Когда я добавить

.barGraph li { 
    position: absolute; 
    }

Стержни не плавают больше, и получится так: 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>

источник

2015-01-05 Mae

@Sompuperoo добавил :) – Mae

позицию: абсолютная будет использовать сверху, снизу, слева, справа на позицию, он не будет плавать. Вам понадобится JS, чтобы установить его top: -xxx; где xxx - высота баров – tom10271

Float: левый и позицию: абсолютная вместе, не имеют смысла. Вместо этого установите элементы списка в display:inline-block; и vertical-align:bottom;

jsFiddle example

источник

2015-01-05 03:30:09 j08691

«Поплавок: левая и позиция: абсолютное вместе не имеет смысла» +1 –

CSS: Float слева и позиция абсолютного

ответ

Смежные вопросы