Html Img显示在div下方而不是div中？

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

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

控制台3/11 11.28
聊天室

您应该使用

display: inline-block

display: flex /*or inline-flex */

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

display: inline-block

display: flex /*or inline-flex */

在父级中，使用div来执行此操作

---

如果您决定使用flex，您可以看到一个很好的指南

我不确定是否正确，但我想您需要其中一个来解决您的问题：

<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
            <img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;">
        </div>
        <br>
    </div>
</div>

控制台3/11 11.28
聊天室

或

控制台3/11 11.28
聊天室

---

如果有帮助或没有帮助，请告诉我：）

我相信您正在寻找这样的产品：

<div style="display: flex; justify-content: space-between;">
    <div>
        <span style="color: red"><b>CONSOLE</b></span>
        <span style="color: grey;">3/11 11.28</span> <br>
        <span>Chat started</span>
    </div>
    <img src="https://www.shareicon.net/data/512x512/2015/12/19/690073_sign_512x512.png" height="40px" width="40px" style="opacity: 0.7;">
</div>

安慰
3/11 11.28

聊天开始了

此代码使用css

flexbox

创建此类定位。我建议您进一步研究

flexbox

，因为它将为您解决90%的定位问题，同时它的使用问题也比

浮动的使用问题小。您可以在此处找到有关该主题的更多信息：

我还建议不要混合使用标记和样式，而是使用css类将样式应用于元素。它将允许您在页面变得更复杂时重复使用样式，而无需大量重复，还允许您保持标记更清晰、更可读