語義用戶界面中的列表項與圖像一起推送文本

Question

語義用戶界面網站顯示了包含左側圖像的項目列表示例。

http://semantic-ui.com/elements/list.html

它正常工作，除非我用足夠長的文本，該文本然後將圖像下進入。

這不會發生，當我使用圖標，而不是圖像。

比較這與圖像http://codepen.io/anon/pen/GjLGVx

<div class="ui list"> 
    <div class="item"> 
    <img class="ui avatar image" src="http://semantic-ui.com/images/avatar2/small/rachel.png"> 
    <div class="content"> 
     <a class="header">Rachel</a> 
     <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
    </div> 
    </div> 
</div> 

是這樣的：

這與圖標http://codepen.io/anon/pen/pEBKrX

<div class="ui list"> 
    <div class="item"> 
    <i class="ui apple icon"></i> 
    <div class="content"> 
     <a class="header">Rachel</a> 
     <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
    </div> 
    </div> 
</div> 

任何人都可以修復圖像版本，以便文本顯示在圖像上，就像圖標版本一樣嗎？

瀏覽器是由鉻54.0.2840.71（64位）

Answer 1

嘿，你也可以像這樣

.item{ 
 
    border:1px solid red; 
 
    width:300px; 
 
    position:relative; 
 
} 
 
img{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
} 
 
a{ 
 
    color:blue;} 
 
.content { 
 
margin-left:50px; 
 
    
 
}

<div class="ui list"> 
 
    <div class="item"> 
 
    <img src="http://www.apple.com/home/images/og.jpg?201608151252" height=50px width=50px> 
 
    
 
    <div class="content"> 
 
     <a class="header" href="#">Rachel</a> 
 
     <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
    </div> 
 
    </div> 
 
</div>

希望這有助於