时间戳

首页 > 解决方案 > Img 显示在 div 下面而不是在 div 中？

html - Img 显示在 div 下面而不是在 div 中？

问题描述

所以我一直在尝试建立一个聊天室，我希望管理员能够删除消息。我制作了一个img 标签，它应该位于 div 的内部和右侧，但它位于 div 的下方和右侧。我该怎么做？

HTML 代码（片段很奇怪，所以尝试使用常规的 html 文件）

<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
    <div style="width: 95%;">
        <span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span> 
        <div style="width:100%;"> Chat startet</div>
        <img src="https://www.shareicon.net/data/512x512/2015/12/19/690073_sign_512x512.png" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;" > <!-- The img that is a problem -->
        <br>
    </div>
    
</div>

标签： htmlcss

解决方案

你应该使用类似的东西

display: inline-block

对于元素，您希望位于同一行。或者你可以使用类似的东西

display: flex /*or inline-flex */

在父级中，div 这样做。

如果你决定使用 flex，你可以看到一个很好的指南https://css-tricks.com/snippets/css/a-guide-to-flexbox/

推荐阅读