html - 条形图效果 : Aligning Multiple DIVs to Bottom when Side by Side

Question

这是我的问题的图片: http://www.rhexi.com/images/uploads/example.jpg

我正在尝试将多个并排的 div 对齐到父 div 中的底部。我试图实现的最终结果是一个条形图，其中有一个父容器，父容器底部有多个条形 div。

我已经成功地将子栏 div 嵌入到容器 div 中，但它们都是顶部对齐的。我如何让它与底部对齐？

我不想使用 position: absolute 和 bottom: 0 因为这些条需要 float 。

这是我的代码:

    <div style="width: 100px; height: 50px; padding-bottom: 1px; border: 1px solid #000;">
            <div style="width: 20px; height: 20px; background: #000; margin-left: 1px; float: left;"></div>
            <div style="width: 20px; height: 10px; background: #00f; margin-left: 1px; float: left;"></div>
            <div style="width: 20px; height: 5px; background: #f00; margin-left: 1px; float: left;"></div>
    </div>

感谢您的帮助!

Answer 1

如果您想继续使用此技术，但需要 skybondsor 的答案与“屏幕”的底部对齐而不在每个栏上使用绝对定位，只需使用您的边距样式即可。你的 margin-top 应该等于:

margin-top = height_of_graph - height_of_bar

因此，在 skybondsor 设置的示例中，这对我有用:

<div style="width: 100px; height: 50px; padding-bottom: 1px; border: 1px solid #000;position:relative;">
    <div style="width: 199px; height: 50px; position: absolute; bottom: 0;">
        <div style="width: 20px; height: 20px; background: #000; margin-left: 1px; float: left; margin-top: 30px;"></div>
        <div style="width: 20px; height: 10px; background: #00f; margin-left: 1px; float: left; margin-top: 40px;"></div>
        <div style="width: 20px; margin-top: 45px; height: 5px; background: #f00; margin-left: 1px; float: left;"></div>
    </div>
</div>

希望这对您有所帮助。