CSS плавать все бары див Вниз

Question

У меня есть 10 комплектов DIVs вложенных в родительском DIV:

<div id="bar_block"> 
    <div class="bar bar1"></div> 
    <div class="bar bar2"></div> 
    <div class="bar bar3"></div> 
    <div class="bar bar4"></div> 
    <div class="bar bar5"></div> 
    <div class="bar bar6"></div> 
    <div class="bar bar7"></div> 
    <div class="bar bar8"></div> 
    <div class="bar bar9"></div> 
    <div class="bar bar10"></div> 
</div> 

Я использовал этот CSS до сих пор:

#bar_block { 
    width:350px; 
    height:75px; 
} 

.bar { 
    border:1px solid #000; 
    width:8%; 
    float:left; 
    margin-right:5px; 
} 

.bar1 { 
    height:10%; 
} 

.bar2 { 
    height:20%; 
} 

.bar3 { 
    height:30%; 
} 

.bar4 { 
    height:40%; 
} 

.bar5 { 
    height:50%; 
} 

.bar6 { 
    height:60%; 
} 

.bar7 { 
    height:70%; 
} 

.bar8 { 
    height:80%; 
} 

.bar9 { 
    height:90%; 
} 

.bar10 { 
    height:100%; 
    margin:0; 
} 

Я хотел, чтобы все чтобы плавать влево. Абсолютное положение не работало для меня, так как все бары будут тесно соединены. Есть идеи?

Answer 1

Попытка изменения CSS для контейнера и дивы к:

#bar_block { 
    width:360px; 
    height:75px; 
    position:relative; 
} 

.bar { 
    border:1px solid #000; 
    width:24px; 
    bottom:0; 
    display:inline-block; 
    margin-right:2px; 
} 

Инлайн-блок в сочетании с нижней и шириной пикселя должны это сделать.

jsFiddle example.