图像显示在块<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放在你想要的地方。