css - 由于 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 的右 Angular ，但不会被切断。如果该行充满了文本，那么可以创建一个新行，右上角有一个图标。但通常图标应位于文本末尾的同一行。

感谢您的帮助。

Answer 1

对第二个 div 进行 clearfix。只需将 clear: both; 添加到 .updated