将一个HTML元素放在另一个元素的右边，而不是放在右边或左边
将一个HTML元素放在另一个元素的右边，而不是放在右边或左边
提问于 2020-07-18 12:31:20
我已经准备好了以下div样式：
除了“喜欢”按钮之外，一切都在按计划工作，我把它作为当前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；但这似乎不能将图像粘贴到帖子的底部。我也尝试过添加边距，但这最终会扰乱文章标签中的其他元素。
下面是我正在尝试实现的一个示例(红色矩形内部是最佳位置)：
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-07-18 12:42:48
如果你使用bootstrap，你可以简单地在<div class="col"></div>中包装你的图片和like按钮
瞧！您有一列内容，非常简单。
Stack Overflow用户
发布于 2020-07-18 12:56:20
伙计，我得说，你的代码真是一团糟。看在上帝的份上，不要在这么简单的代码中使用这么长的类名。正如我所看到的，你没有关于浮动div的基本知识。不管怎样，这就是你的答案。只需删除您的css代码并粘贴我的代码。
.article-likes {
width: 100px;
height: 50px;
border: 1px solid green;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62964652
复制相关文章
相似问题
腾讯云开发者
