具有不同高度的多个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