javascript - div 在另一个动态 div 的底部

Question

我试图在容器底部粘贴一个 div，而在容器中间，容器中充满了来自 ng-repeat 的内容。这个内容每次都是完全不同的，可以有 1 个元素或 100 个元素，它最多适合 5 个并排放置，并且正在制作新行的 float 。图片的标准宽度为 120 像素。它是一个嵌套的 ng-repeat

这是CSS

.Container {
    width: 700px;
    margin-left: 10px;
    float: left;
}
.Top {
    background-color: #f7f7f7;
    margin-top: 15px;
    margin-bottom:5px;

}
.bottom {
    background-color: #f7f7f7;
    bottom: 0;
    float: initial;
}
.item {
    min-height: 250px;
    float: left;
    background-color: red;
    width: 120px;
    margin-right: 10px;
    font-family: 'Tahoma';
    font-size: 12px;
    color: #000000;
}

这是html

<div class="Container" ng-repeat="items in list">

  <div class="top">i am in the top {{items.date}}</div>

    <div class="item" ng-repeat="item in items">
      <img ng-src="{{item.image}}" />
      <a>{{item.dynamictext}}</a>   
    </div>

  <div class=bottom">i should be in the bottom {{items.addres}}</div>

</div>

所以我想做的是让底部 div 始终位于 ng-repeat 的最后一项之下。我试着查看 $last，但它只是为最后一项设置样式，而 last-of-type 也只是为 ng-repeat 的最后一项设置样式。是否有可能的组合允许我将底部 div 放在下面，留出 10px 的边距，比如

想要的结果

-- TOP -- 

-- item --
-- item -- etc.

-- BOTTOM --

我不知道每个元素的高度并且它们彼此相邻放置，当前结果是:

-- TOP -- 

-- item --
-- item -- -- BOTTOM --

Answer 1

明确一点，你想放置 <div class="bottom">里面<div class="item"... ？有什么原因不能简单地将 div 放在那里开始吗？

编辑:看起来您需要清除底部 div 上的 float 。添加clear: both;到 .bottom CSS 中的类。