Question

所以我一直试图建立一个聊天室，我希望管理员能够删除消息。我制作了一个 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>

Answer 1

您应该使用类似

display: inline-block

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

display: flex /*or inline-flex */

在父级中，div这样做。

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

Answer 2

我不确定我做对了吗，但我想您需要其中一个来解决您的问题：

<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>

或

<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>
        <span style="float: right;">
            <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;">
        </span> 
        <div style="width:100%;"> Chat startet</div>
         <br>
    </div>
</div>

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

Answer 3

我相信您正在寻找这样的东西：

<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>

此代码使用css flexbox创建此类定位。我建议您多研究flexbox，因为它可以为您解决90％的定位问题，并且与使用floats相比，它的使用同时也不会出现问题。您可以在这里找到有关该主题的更多信息：https://internetingishard.com/html-and-css/flexbox/

我还建议不要将标记和样式混合使用，而应使用CSS类将样式应用于元素。随着页面变得越来越复杂，它将使您可以重复使用样式而无需进行大量重复操作，还可以使标记保持更加整洁和可读性。

图显示在div下方而不是div中？

3 个答案: