html - 如何将文本放置在相对定位图像的右侧？

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;