javascript - 将图标保留在帖子底部，并在框中显示动态文本

Question

所以我有一个包含帖子内容的框，它是文本。如果内容“溢出”，会发生什么情况，框会变大，但图标会推出框。我想做的是让它们成为一个可靠的位置。这是我看到的

评论、删除和喜欢的计数被放在一边。这就是我想要的样子，即使有更多内容也是如此

这是盒子的 CSS

.main-content{
    margin-top: 20px;
    width: 100%;
    min-height: 100px;
    background: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    position: relative;
}

还有图标

.fa-comment {
    float: right;
    margin-top: 67px;
    margin-right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #69f;
}
.likes{
    padding-left: 20px;
}
.fa-heart-o{    
    transition: 0.5s;
    margin-top: 60px;
    color: #FF6699;
    font-size: 24px;
    float: right;
    margin-right: 15px;
    cursor: pointer;
}

.fa-heart{  
    transition: 0.5s;
    margin-top: 60px;
    color: #FF6699;
    font-size: 24px;
    float: right;
    margin-right: 15px;
    cursor: pointer;
}

.fa-trash-o {   
transition: 0.5s;
    margin-top: 67px;
    color: #ABA9A9;
    font-size: 24px;
    float: right;
    margin-right: 15px;
    cursor: pointer;

}
.icons{
    float: right;
    margin-right: 0%;
    margin-top: 1%;
}

我不确定我是否会使用 CSS 或 JS 执行此操作，但任何帮助都会很棒。

Answer 1

您可以在注释 block 后添加 clearfix。 例如:

<div class="main-content">
... 
Your images and text
...
<div class="clearBoth"></div>
</div>


<style>
.clearBoth{
 clear:both;
}
</style>

您可以使用我的 block 样式:jsfiddle