CSS 条形图 - 非常简单

Question

我有一些非常基本的代码，它可以正常工作，除了所有内容都与顶部对齐...理想情况下，条形图应与底部对齐。我想我可以使用固定定位，因为尺寸是 50px x 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 大师都愿意阐明我似乎缺少的一点点信息吗？我用谷歌搜索了一下，大多数例子都太复杂/复杂了，

Answer 1

首先，将 CSS 与 HTML 分开。当您可以为内部 div 使用 bar 类时，您重复了太多代码。

bottom: 0 不会改变相对定位的 div 的任何内容。

如果你想使用相对定位，去掉 float 和 bottom 并使用 display: inline-block 和 vertical-align: baseline;。此外，在这种情况下，您需要去除 HTML 中内部 div 之间的任何空格(换行符)。

像这样(你可以在 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;
}