具有不同高度的多個div（在底部）的位置

Question

我想用我自己的css實現一個簡單的html頁面的條形圖。我處於創建html和css的初始階段。以下是我的HTML和CSS。

小提琴：http://jsfiddle.net/ismailvtl/GJUmq/

我希望我的「酒吧」留在「行」，即使我改變「欄中的」高度。

HTML：

<div class="bar-holder"> 
<div class="bar car"></div> 
<div class="bar fat"></div> 
<div class="bar iron"></div> 
</div> 
<div class="line"></div> 

CSS：

.bar-holder 
{ 
height:auto; 
width:100%; 
float:left; 
} 
.line { 
width:100%; 
height:3px; 
background:#000; 
float:left; 
position:relative; 
} 
.bar { 
height:350px; 
width:40px; 
float:left; 
margin-left:20px; 
border:1px solid #dedede; 
bottom:0; 
} 
.car { 
background:blue; 
height:240px; 
} 
.fat { 
background:red; 
height:300px; 
} 
.iron { 
background:black; 
height:330px 
} 

Answer 1

http://codepen.io/anon/pen/kiwqE

你的所有酒吧必須是絕對的，有一個底部0