3

我想在图像顶部的三个位置放置按钮

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

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

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

3 回答 3

7

这实际上与 jQuery 或 jQuery mobile 无关。可以用简单的 HTML 和 CSS 来完成。有关我将如何做到这一点的示例，请参见此小提琴：http: //jsfiddle.net/rHaPH/22/

于 2012-07-27T09:21:32.300 回答
3

尝试这个：

<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 fiddle 中，它将使用 JQMobile 工作。确保包含 JQM 的 css url，并确保在将 JQuery 添加到 JS 小提琴时勾选 JQMobile。

更新：

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

于 2012-07-27T09:35:00.000 回答
0

与今天一样，使用 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的工作示例

于 2013-09-20T11:39:04.327 回答