什麼不會形象進入div？

Question

我試圖把圖像尺寸相同的格內，但出於某種原因，圖像不斷出現，哪怕這是在我的HTML的DIV中的div右：

<div> 
    <img width="16" height="16"></img> 
</div> 

我創建了一個JSfiddle，顯示發生了什麼：https://jsfiddle.net/5q0s3y1j/

任何人都可以幫助我理解如何把圖像放在div中嗎？

Answer 1

的問題是與left: 20px;在.userFlair CSS。它告訴圖像從容器的起始位置左移20個像素，這比容器本身大。

將其更改爲left: 0;或完全省略它會將圖像放在div中。

這是最新的fiddle。

Answer 2

刪除圖像類左邊：20px。

.userFlair { 
    position: absolute; 
    bottom: 50%; 
    // left: 20px; 
    transform: translateY(50%); 
} 

見更新小提琴：https://jsfiddle.net/5q0s3y1j/2/

Answer 3

你並不需要單獨定位您的IMG。你可以簡化你的代碼到這個CSS。

.lobbyFlair { 
 
    border: 1px solid red; 
 
\t height: 16px; 
 
\t width: 16px; 
 
\t display: inline-block; 
 
\t position: relative; 
 
}

<div class="lobbyFlair"> 
 
    <img class="userFlair" width="16" height="16" src='http://66.media.tumblr.com/avatar_2dde66f8a62c_16.png'/> 
 
</div>