放置具有不同高度的多个div(在底部)

时间:2013-04-13 14:05:43

标签: css

我正在尝试使用自己的css为简单的html页面实现条形图。我正处于创建html和css的初始阶段。下面是我的html和css。

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

即使我更改了“bar”的高度,我希望“bar”保持“line”

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
}

1 个答案:

答案 0 :(得分:0)

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

你所有的酒吧都需要是绝对的,并且底部为0