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

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;