将HTML元素放置在另一个元素的正下方，而不是放置在右侧或左侧

Question

我已准备好以下div样式：

除“ like”按钮外，所有内容均按计划工作，我将其作为当前css的div（为便于查看边框，我还添加了绿色边框进行调试）：

.article-likes {
 margin-right: 16px;
 float: bottom;
 bottom: 8px;
 left: 5px;
 border: 3px solid #73AD21;
}

这是整个div的html。

<article class="media content-section">
<img class="rounded-circle article-img" src="/static/profile_pics/b1775e70284ad2de-1.png">
<!--- THE ELEMENT I AM TRYING TO MOVE IS DIRECTLY BELOW THIS LINE::::: --->
<div class="article-likes"><a class="btn btn-success btn-xs" href="">like</a></div>
  <div class="media-body">
    <div class="article-metadata">
      <a class="mr-2" href="/user/1">1</a>
      <small class="text-muted">(me)  July 18, 2020 - 04:16 AM</small>
      <div style="float:right;" class="mr-2">
        <a type="button" class="btn btn-secondary btn-xs" href="/post/3">view</a>
      </div>
    </div>
    <h2><a class="article-title" href="/post/3">demo post</a></h2>
    
    <p class="article-content">demo post sorry</p>
    
  </div>
</article>

我试图将like按钮定位在用户图片（个人资料图片）的正下方（略向左侧偏移）。我尝试过float：bottom;但这似乎并未将图片粘贴在帖子的底部。我也曾尝试添加页边距，但最终会弄乱article标签中的其他元素。

以下是我要实现的示例（红色矩形内部是最佳放置）：

Answer 1

如果您使用引导程序，则可以将图像和按钮之类的东西包裹在<div class="col"></div>

中

还有瞧！您有一列内容，非常简单。

Answer 2

伙计，我得说，您的代码完全搞砸了。看在上帝的份上，不要将如此冗长的类名用于如此简单的代码。如我所见，您不具备有关浮动div的基本知识。无论如何，这是您的答案。只需删除您的CSS代码并粘贴我的代码即可。

.article-likes {
 width: 100px;
 height: 50px;
 border: 1px solid green;
}