Javascript 有没有一种方法可以让同一个div的绝对位置（底部）和倍数并排出现？

我使用div作为一种柱状图的构建块。每个div占屏幕的1%，而且有很多div。我希望他们都通过bottom:0px坚持到父div的底部；然后使用float将它们的多个并排放置：left；或显示：内联

我用相对位置和浮动得到：左；工作

-----------------------
|IIIIIIIIIIIIIIIIIIIII|
|                     |
|                     |
|                     |
-----------------------

或此带底部绝对位置：0px；当然是在工作 我的div是一个接一个地画的

-----------------------
|                     |
|                     |
|                     |
|I                    |
-----------------------

我想要的是这样的东西，这样我就可以更改div的大小，并制作柱状图

-----------------------
|                     |
|                     |
|                     |
|IIIIIIIIIIIIIIIIIIIII|
-----------------------

当然，这是可能的，通过单独设计它们的样式，或者通过JS，以及我最终可能要做的事情。但是有没有一个好的HTML CSS唯一的方法可以做到这一点

.Column {
    float: left;
    position: absolute;
    bottom: 0;
    width: 1%;
}

.Graph {
    position: relative;
    margin: auto;
    width: 80%;
    height: 400px;
    border: 3px solid green;

}

---

以下是一个我相信您正在寻找的示例：

#容器{
位置：相对位置；
宽度：1000px；
高度：500px；
边框：2倍纯红；
}
#母公司{
位置：绝对位置；
底部：0px；
左：5%；
高度：100px；
宽度：90%；
边框：2倍实心#000；
}
.孩子{
职位：亲属；
显示：内联块；
身高：100%；
宽度：10%；
利润率：0px 7px；
边框：2件纯蓝；
}

---

您可以使用flexbox来实现这一点：

.container{
显示器：flex；
高度：150像素；
边框：1px实心；
对齐项目：柔性端；
}
.container>span{
宽度：10px；
高度：20px；
背景：红色；
利润率：0.5px；
}
.container>span:n个子项（奇数）{
背景：蓝色；
高度：30px；
}

为什么不使用javascript计算位置并设置样式的

右属性

呢？您还可以将div包装到另一个div中，div将浮动，因为包装div将绝对定位到其父对象的底部感谢您的回复，但这对我来说真的不起作用，因为我希望能够使用道具更改底部附加div的高度值以显示数据。如果需要，我需要它们一直到达您创建的容器顶部。这毕竟是一个柱状图。如果您将

#parent

高度从

100px

更改为

100%

，该怎么办？如果您需要它们填充整个容器，为什么要将它们放在底部？将父元素高度更改为100%，然后降低子元素的百分比可以有效地重新创建原始问题（如果它们被固定在顶部，而我将它们更改为绝对位置以将它们固定在底部，则它们重叠）。我想要的是将多个相同的子元素固定到父div元素的底部，这样我就可以将道具单独传递给每个元素，并且只更改其高度（同时仍然固定到底部）。结果应该像这样的柱状图Yeap，所以我发布的原始解决方案将适用于此，我将进行一些编辑，希望以更好的方式显示这一点。是的，这个解决方案真的可以为我工作，现在我有一些时间玩它，非常感谢你的时间。然而，对齐项目：flex-end正是我在原始帖子中描述的。我真的很喜欢这个解决方案。这一个像一只魅力蚂蚁，它真的很优雅！非常感谢你！