html - 为什么元素不位于容器底部？

Question

我有一个条形图，其中包含 5 个不同的子容器，每个子容器都有不同的颜色。我希望“鸡”子容器位于栏的底部（零下边距），但由于某种原因它不起作用。事实上，当我对子容器使用绝对定位时，它甚至都没有出现。（注意：每个子容器的高度由 Javascript 确定，我已经测试了 JS，它工作正常，所以我认为问题出在 HTML/CSS 中）。

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;
 }

Answer 1

您看不到它的原因是因为它的宽度为 0px。尝试给 .chicken 100% 的宽度。