Question

我想在三个地方将按钮放在图像的顶部

图像的左下角
图片的右下角
图像中心。（可选）....

如何将这些按钮放在图像顶部。

<img src="images/default_image.png" style="width:90%" id="mImage"  />

Answer 1

这与jQuery或jQuery mobile无关。可以使用简单的HTML和CSS完成。看看这个小提琴，我将如何做到这一点：http://jsfiddle.net/rHaPH/22/

Answer 2

试试这个：

<div id="div-1">
  <img src="../img/logo.png" style="width:90%" id="mImage">
  <div id="div-1a" data-role="fieldcontain">
    <a href="index.html" data-role="button" data-icon="delete">Delete</a>
  </div>
  <div id="div-1b" data-role="fieldcontain">
    <a href="index.html" data-role="button" data-icon="delete">Delete</a>
  </div>
</div>

用这个：

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 bottom:0;
 left:0;
}
#div-1b {
 position:absolute;
 bottom:0;
 right:0;
}

您可以将其复制到JS小提琴中，它将使用JQMobile。确保包含JQM的css url，并确保在将JQuery添加到JS小提琴时勾选JQMobile。

<强>更新

您还应该注意JQMobile会将span标记注入到DOM中，这将成为您运行时的按钮。这意味着我提供的CSS在概念上是可以的，但是选择器需要指向那些span标签（而不是使用div标签的id）。

Answer 3

就像今天一样，使用jQuery mobile v1.3.2我已经通过以下方式实现了它：

<div data-role="page">
   <div data-role="content">
      <div id="wrapper">
         <div id="button">
            <a href="#" data-role="button">Button</a>
         </div>
         <img src="i.jpg">
      </div>
   </div>
</div>

跟随css：

#wrapper{ position:relative; }
#button{ position:absolute; top: 10px; left:0px; z-index:10; }
img{max-width:100%; }

您可能不需要某些样式，但我只是从我自己的代码中获取代码示例。

包装器div是相对定位的，因此其内容可以绝对定位。

按钮div中的z-index是为了确保它位于图像的顶部。

您可以根据需要添加任意数量的按钮，并更改其顶部，左侧，右侧和按钮的css属性，以便在图像周围移动它们

jsFiddle

的工作示例

如何在图像的一角添加“图像”上的按钮？

3 个答案: