Html 如何在绝对定位元素之间应用水平空间

我创建了一组四个

div

标签，背景颜色为黄色，并指定了

宽度和
高度，然后我将其位置设置为
绝对值和
底部
为
0px
，如下代码所示：


#音量计{
宽度：25em；
高度：20em；
背景色：黑色；
}
voteindex先生{
宽度：2米；
高度：8em；
背景颜色：黄色；
浮动：左；
位置：绝对位置；
底部：0；
边缘：2米；
}
位置：绝对位置是导致元素重叠的代码。如果我去掉这个部分，元素会均匀地分布在这个区域上，所以看起来你的计算做得很好


#音量计{宽度：25em；高度：20em；背景色：黑色；}
.voteindex{宽度：2米；高度：8米；
背景色：黄色；浮动：左侧；
底部：0；边距：2em；}
将voteindex divs与绝对位置一起包装在div中


#音量计{宽度：25em；高度：20em；背景色：黑色；位置：相对；}
.voteindex{宽度：2米；高度：8米；
背景色：黄色；浮动：左侧；
边距：2em；}
.底部{
位置：绝对；底部：0；
}
为什么要使用
绝对定位？只需浮动
div
元素，对容器和内部元素使用px而不是em。另外，内部元素必须在左边设置一个边距才能有一些空间

#votingmeter { 
   width:400px;
   height:20em;
   background-color:black;
}

.voteindex { 
   width:50px;
   height:100px;
   background-color:red;
   float:left; 
   margin-left:10px
}

这里有一个测试。
我想你需要如下内容。它使用的是纯css


#音量计{
高度：100px；
文本对齐：居中；
位置：相对位置；
背景色：黑色；
宽度：100%；
}
voteindex先生{
背景：黄色；
底部：1px；
高度：30px；
位置：绝对位置；
宽度：10px；
动画：声音0毫秒-800毫秒线性无限交替；
}
@关键帧声音{
0% {
不透明度：.35；
高度：30px；
}
100% {
不透明度：1；
高度：99px；
}
}
.voteindex:n个子（1）{左：1px；动画持续时间：474ms；}
.voteindex:n子（2）{左：12px；动画持续时间：433ms；}
.voteindex:n子（3）{左：25px；动画持续时间：407ms；}
.voteindex:n子（4）{左：37px；动画持续时间：458ms；}
.voteindex:n子（5）{左：49px；动画持续时间：400ms；}
.voteindex:n子（6）{左：52px；动画持续时间：427ms；}
.voteindex:n子（7）{左：65px；动画持续时间：441ms；}
.voteindex:n子（8）{左：77px；动画持续时间：419ms；}
.voteindex:n子（9）{左：89px；动画持续时间：487ms；}
.voteindex:n子（10）{左：102px；动画持续时间：442ms；}​

我之所以使用绝对位置，是因为当我给height属性赋予更高的值时，我希望黄色div的高度向上增加。我的目的是创建一个动画，其中div的高度将像图形一样上下移动。啊，好的。然后，我认为@GolezTrol用户给出了正确的答案。关于元素之间的间距，它工作得很好。太好了！但是，我也需要以这样一种方式来指定div，即当我增加黄色div的高度时，它必须向上增加。你能给我一个这样做的方法吗？你的意思是它们应该从底部开始，然后向上上升，在黑色区域内？没错。知道任何方法吗？我正在尝试，但我必须去。我已将建议粘贴在答案底部，但我现在没有时间解释，对不起。没关系。请在有时间时回答。感谢您的帮助。您需要使用css的第n个孩子。检查可以检查我的答案。它不动，兄弟。为什么会这样？请重新检查你的小提琴。这很有效！帮了大忙。非常感谢兄弟！我不知道你的建议怎么这么长时间没有被注意到！