圖像顯示在塊<a> - CSS

Question

我有一個像下面的頁面;

<style type="text/css"> 
#div1 { 
    height: 100px; 
    background-color: #CCCCCC; 
} 
#div2 { 
    display: inline; 
    height: 48px; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    white-space: nowrap; 
} 
#div2 a { 
    display: block; 
    background-color: #FF9900; 
    height: 51px; 
    width: 150px; 
    padding-right: 50px; 
    text-decoration: none; 
    word-wrap: break-word; 
    white-space: normal; 
} 
#div2 img { 
    border:0; 
    float: right; 
} 
</style> 

<div id="div1"> 
    <div id="div2"> 
     <a href="">text1 text2 text3 text4 text5 text6 text7 text8<img src="image.jpg"></a> 
    </div> 
</div> 

我得到的是這樣的;

，我想這一點;

Here是小提琴。

Answer 1

您需要將position: relative;添加到#div2 a和position: absolute; right: 0; top: 0;到#div2 img。

See working jsFiddle：

HTML：

<div id="div1"> 
    <div id="div2"> 
     <a href="">text1 text2 text3 text4 text5 text6 text7 text8<img src="http://i.imgur.com/VlyB1.jpg"></a> 
    </div> 
</div>​ 

CSS：

#div1 { 
    height: 100px; 
    background-color: #CCCCCC; 
} 
#div2 { 
    display: inline; 
    height: 48px; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    white-space: nowrap; 
} 
#div2 a { 
    position: relative; 
    display: block; 
    background-color: #FF9900; 
    height: 51px; 
    width: 150px; 
    padding-right: 50px; 
    text-decoration: none; 
    word-wrap: break-word; 
    white-space: normal; 
} 
#div2 img { 
    border:0; 
    position: absolute; 
    right: 0; 
    top: 0; 
}​ 

Answer 2

您可以嘗試定位您的元素，而不是重新躺在花車上。

添加以下內容：

#div2 a { position:relative} 
#div2 img {position:absolute; top:0; right:0;} 

同時刪除您IMG浮動。

看到這裏的例子http://jsfiddle.net/brZdW/1/

Answer 3

這是工作：

CSS：

#div1 { 
    height: 100px; 
    background-color: #CCCCCC; 
} 
#div2 { 
    display: inline; 
    height: 48px; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    white-space: nowrap; 
} 
#div2 a { 
    display: block; 
    background-color: #FF9900; 
    height: 51px; 
    width: 200px; 
    padding-right: 0px; 
    text-decoration: none; 
    word-wrap: break-word; 
    white-space: normal; 
} 
#div2 img { 
    border:0; 
    float: right; 
} 

HTML：

<div id="div1"> 
    <div id="div2"> 
     <a href=""><img src="http://i.imgur.com/VlyB1.jpg"><span>text1 text2 text3 text4 text5 text6 text7 text8</span></a> 
    </div> 
</div> 

Answer 4

看到搗鼓代碼和演示

小提琴：http://jsfiddle.net/bfAdE/1/

演示：http://jsfiddle.net/bfAdE/1/embedded/result/

注：由於我沒有圖像，所以我只是把img標籤邊框的紅色，並設置寬度和高度的演示。

SS：

Answer 5

試試這個： http://jsfiddle.net/erUxF/16/

通過相對定位DIV2，你有內置的絕對是相對於DIV2，不是頁面定位元素的魔力，所以你可以使用left，right和top將img放在你想要的地方。