javascript – 保持图标在帖子底部与动态文本框中

2023年5月17日 221次阅读

所以我有一个包含帖子内容的文本框.如果内容“溢出”,框会变大,但图标会立即开箱即可.我想做的是将它们作为一个坚实的位置.这就是我所看到的

评论,删除和喜欢计数是偏向一边的.这就是我希望它看起来的样子,即使有更多的内容

这是盒子里的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来做这件事,但任何帮助都会很棒.

最佳答案 您可以在注释阻止后添加clearfix.

例如：

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


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

您可以使用我的块样式：jsfiddle

点赞