小图像将在底部被切断，由于div的端

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的rigth角落，但不会切断。如果该行充满文本，则可以创建一个新行，只需在右下角显示图标即可。但通常图标应该在文本的末尾位于同一行。

感谢您的帮助。

Answer 1

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

Answer 2

相反，跨度包装你的形象，只要给它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。