将HTML元素放置在另一个元素的正下方，而不是放置在右侧或左侧 [英] Position an HTML element right under another as opposed to positioned to the right or left

问题描述

我已准备好以下div样式并准备好:

I have the following div styled and ready:

除了喜欢"之外，所有事情都按照计划进行.按钮，我将其作为当前CSS的div(为了便于查看边框，我还添加了绿色边框用于调试):

everything is working according to plan EXCEPT the "like" button, which I have as a div with the current css (to ease in seeing the border, I have also added a green border for debugging):

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

这是整个div的html.

and this is the html for the entire div.

<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标签中的其他元素.

I am trying to get the like button positioned directly under (and slightly offset to the left) of the user image (profile picture). I have tried float:bottom; but this does not seem to stick the image to the bottom of the post. I have also tried adding margins but those end up messing the other elements in the article tag.

以下是我要实现的示例(红色矩形内部是最佳放置):

Here is an example of what I am trying to achieve (inside red rectangle is optimal placement):

推荐答案

如果您使用引导程序，则可以将图像和按钮类似地包裹在< div class ="col"></div>中.

If you use bootstrap you can simply wrap your image and like button inside <div class="col"></div>

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

and Voila! you have a column of contents, very simple.

这篇关于将HTML元素放置在另一个元素的正下方，而不是放置在右侧或左侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！