CSS的float的div的所有酒吧底部

Question

我有10套嵌套在一個父DIV的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用於容器和到的div：

#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。