另一个动态 div 底部的 div答案

【问题标题】：div in bottom of another dynamic div另一个动态 div 底部的 div
【发布时间】：2017-12-15 17:35:54
【问题描述】：

我试图在容器底部粘贴一个 div，而在容器中间填充来自 ng-repeat 的内容。此内容每次都完全不同，可以有 1 个元素或 100 个元素，它最多可以容纳 5 个并排放置，并且正在制作新行。图像是标准的 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>

所以我想要做的是我总是在 ng-repeat 的最后一项下获得底部 div。我尝试查看 $last ，但它只是设置最后一项的样式，而 last-of-type 也只是设置 ng-repeat 的最后一项的样式。是否有一种组合可以让我将底部 div 放置在下方，并留出 10px 的边距，例如

想要的结果

-- TOP -- 

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

-- BOTTOM --

我不知道每个项目的高度并且它们彼此相邻，当前结果是：

-- TOP -- 

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

【问题讨论】：

您可以使用 position:absolute 作为底部 div 并将容器上的 margin-bottom 设置为底部 div 的高度。
@jkordas：是的，您的回答是正确的，但是我的问题不正确，很抱歉，现在编辑问题。
用 clear:both 清除浮动是什么意思； ?
我忘了复制一段代码；这是为了将两个 ng-repeat 保留在屏幕的左侧，我将第一个 ng-repeat 用于分组过滤器以保持所有文章的日期相同

标签： javascript jquery html css angularjs

【解决方案1】：

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

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

【讨论】：

这应该是评论而不是回答。
不，我不希望它在项目中，加上 ng-repeat 底部将一直重复每个元素:)
@Eddie 我同意。不幸的是，我没有足够的声誉来发表评论。我不知道为什么回答问题的权限是在评论权限之前获得的。
@EwaldBos 我刚刚对答案进行了编辑，看到了您提供的示例。我敢打赌，问题在于没有清除底部 div 上的浮动。
是的，这似乎可以解决问题！清除：两者，谢谢蒂姆。我认为 float:initial 应该这样做。