Question

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

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

我已经成功地在容器div中嵌入了子条形div，但它们都是顶部对齐的。如何让它对齐底部？

我不想使用position：absolute和bottom：0，因为这些条需要浮动。

这是我的代码：

    <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 = 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>

希望这有帮助。

Answer 2

如何创建3个div而不是1？像这样：

<div style="width: 20px; height: 100%; margin-left: 1px; float: left;">
    <div style="height: 80px;"></div>
    <div style="height: 100%; background: #000;"></div>
</div>
..

Answer 3

我不确定这是否也是rfausak的目标，但是位置：绝对，底部：0是唯一的方法。幸运的是，嵌套一层更深可以让你在不丢失花车的情况下达到效果。

    <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;"></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>
    </div>

Answer 4

也许让每个条形成一个div嵌套在另一个div中，然后使容器div的背景成为你想要条形的颜色，嵌套div是图表背景的颜色。然后，不是给嵌套的div你想要的高度，你可以给它反过来。

E.g。类似的东西：

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

条形图效果：并排时将多个DIV对齐到底部

4 个答案: