CSS条形图 – 非常简单

我有一些非常基本的代码,它可以工作,除了一切都与顶部对齐…理想情况下,条形将对齐到底部.我想我可以使用固定定位,因为尺寸在50px到50px的平方,但我更喜欢一些不太“固定”的东西.

<div style="border: 1px solid #aeaeae; background-color: #eaeaea; width: 50px; height: 50px;">
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 22px; background-color: #aeaeae; margin: 1px;"></div>
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 11px; background-color: #aeaeae; margin: 1px;"></div>
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 6px; background-color: #aeaeae; margin: 1px;"></div>
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 49px; background-color: #aeaeae; margin: 1px;"></div>
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 28px; background-color: #aeaeae; margin: 1px;"></div>
      </div>

我不想使用库或JS添加.保持这种轻量化是关键任务.

我也更喜欢酒吧是垂直的.任何CSS专家都在关注我似乎缺少的光线？我用谷歌搜索过,大多数例子都很复杂/复杂,

解决方法

首先,将CSS与HTML分开.当你可以为你的内部div使用一个bar类时,你会重复太多的代码.

bottom：0不会为相对定位的div更改任何内容.

如果你想使用相对定位,摆脱浮动和底部并使用display：inline-block和vertical-align：baseline;.此外,在这种情况下,您需要删除内部div(换行符)之间的HTML中的任何空格.

像这样(你可以在http://dabblet.com/gist/2779082看到演示)：

HTML

<div class="graph">
        <div style="height: 22px;" class="bar"></div><!--
        --><div style="height: 11px;" class="bar"></div><!--
        --><div style="height: 6px;" class="bar"></div><!--
        --><div style="height: 49px;" class="bar"></div><!--
        --><div style="height: 28px;" class="bar"></div>
</div>

CSS

.graph {
    width: 50px;
    height: 50px;
    border: 1px solid #aeaeae;
    background-color: #eaeaea;
}
.bar {
    width: 8px;
    margin: 1px;
    display: inline-block;
    position: relative;
    background-color: #aeaeae;
    vertical-align: baseline;
}