如何將文字放置在相對定位的圖像的右側？

Question

我有一個相對定位的圖像，以便我可以對其執行css鼠標懸停效果（當您將其移動時，它會更改圖像）。這是一個響應式設計，因此圖像可以根據屏幕大小進行增大或縮小。

我想立即在此圖像的右側顯示文本。任何人都可以告訴我該怎麼做？

這裏是我的代碼 - 文本結束後顯示圖像（而不是旁邊）。謝謝！

CSS（鼠標懸停改變圖像）：

#mypic { 
    position:relative; 
    max-width:100%; 
} 

#mypic img { 
    position:absolute; 
    left:0; 
    opacity:1; 
    -webkit-transition: opacity .3s ease-out; 
    -moz-transition: opacity .3s ease-out; 
    -o-transition: opacity .3s ease-out; 
    transition: opacity .3s ease-out; 
} 

#mypic img.top:hover { 
    opacity:0; 
} 

HTML：

<div id="mypic"><img class="bottom" src="bottom.jpg" /><img class="top" src="top.jpg" /></div> 
<p>Here is text that should be displayed to the right of the image.</p> 

Answer 1

這是你正在尋找http://jsfiddle.net/DIRTY_SMITH/a0my545L/1/

我設置的寬度<div>至400px;然後將你的文字左移餘下的餘量爲400px;