我有一个条形图，其中包含 5 个不同的子容器，每个子容器具有不同的高度和不同的颜色。“鸡肉”子容器位于酒吧的底部，然后在其顶部应该是鸡蛋子容器，在其顶部是猪肉子容器，等等。
我不知道如何将鸡蛋子容器直接放在鸡肉容器顶部而没有边距（我可以添加一堆 div，但这似乎是一个笨拙的解决方案）。
这是它的样子（鸡是蓝色的，鸡蛋是紫色的等）（注意：每个子容器的高度由 Javascript 确定）
HTML：
<div class="days">
<div class="days-container">
<div class="dairy"></div>
<div class="beef"></div>
<div class="pork"></div>
<div class="eggs"></div>
<div class="chicken"></div>
</div> <!-- end days-container-->
</div> <!-- end days -->
CSS：
.days {
float: left;
height:330px;
width: 1em;
}
.days-container {
position:relative;
height: 330px;
}
.chicken {
position: absolute;
bottom:0;
background-color: #00AAFF;
width: 1em;
}
.eggs {
width: 1em;
????
}