Question

我创建了一个jsfiddle：https://jsfiddle.net/ro2egff7/3/

HTML：

<div class="updated">
    a lot of text
    <span style="display:block; position:relative; float:right;">
        <img  src="~/Images/ic_cancel_black_18dp.png" >
    </span> 
</div>

<div class="updated" >a lot of text</div>

.css

.updated {
    padding:5px 0px 5px 0px;     
    word-break: normal; 
    background-color: white;
    top:0;
    position:relative;    
}

在那里你可以看到我的图标因为第一个div的结束而被切断。我怎样才能在div的每个角落实现那个图标，但不会切断。如果该行充满了文本，则可以创建一个新行，只是右上角的图标。但通常情况下，图标应位于文本末尾的同一行。

感谢您的帮助。

Answer 1

不要用跨度包装图像，只需给它display:inline-block：

<div class="updated">
   a lot of text
   <img src="~/Images/ic_cancel_black_18dp.png" style="display: inline-block" >
</div>

Here is an updated fiddle

Answer 2

制作第二个div的clearfix。只需将clear: both;添加到.updated

即可

由于div的结束，底部会切掉小图像

2 个答案: