Question

我正在使用jquery mobile构建移动webapp。现在我拥有。我有一个可以在this link上看到的可拼写元素。现在，对于我从数据库中返回的每条记录，它将成为一个新的可聚合元素。这是我的可聚合元素的代码。

<div data-role="collapsible">
            <h3>~ITEM.FIRSTNAME~ ~ITEM.NAME~</h3>
                <div id="buttons">
                    <a href="mailto:~ITEM.MAIL~?subject=vul%20hier%20onderwerp%20in!&body=De%20body!" data-role="button">Mail: ~ITEM.MAIL~</a>
                    <img style="position:absolute;top:290px;right:45px;" src="images/mailIcon.png" width=32 height=32 />
                    <a href="tel:~ITEM.PHONENUMBER~" data-role="button">Bel ~ITEM.PHONENUMBER~</a>
                    <img style="position:absolute;top:360px;right:45px;" src="images/phoneIcon.png" width=32 height=32 />

                </div>
            </div>

我有2张图片，一个电话图标和一个邮件图标。就像上面的定位一样，它们只在我第一个可抓取元素的前两个按钮上。但是我需要做什么才能使这些按钮出现在我的后续按钮上？

所以我的问题是，如何将这两个按钮放在ID为“按钮”的div中。

- EDIT-- 这是实际页面的link。

亲切的问候，

燕姿

Answer 1

您需要将position:relative分配给buttons div，然后将第一个img位置更改为top:15px，将第二个img（电话图标）更改为{{1或者适当的东西。

因此，您将定位每个top:75px元素与其包含img div的关系。在您的示例中，所有图像都会叠加，因为它们相对于窗口位于buttons。

Answer 2

我怀疑，图标的绝对定位是罪魁祸首。您使用position:absolute和顶部偏移来定位两个图标，但周围没有position:relative的元素。这意味着定位起点回落到页面顶部。

换句话说，你的第二个（以及第三个，第四个，等等，如果你有更多的结果）图标集就在那里，但它们与前两个图标位于同一个位置：距离顶部仅290px和360px页面。

相反，将带有图标的img放在每个项目的<a>元素内，并相对于其周围环境进行定位。这可能会起作用：

<div data-role="collapsible">
   <h3>~ITEM.FIRSTNAME~ ~ITEM.NAME~</h3>
       <div id="buttons">
          <a href="mailto:~ITEM.MAIL~?subject=vul%20hier%20onderwerp%20in!&body=De%20body!" data-role="button">Mail: ~ITEM.MAIL~
              <img style="float:right;margin:5px 15px" src="images/mailIcon.png" width=32 height=32 />
          </a>

          <a href="tel:~ITEM.PHONENUMBER~" data-role="button">Bel ~ITEM.PHONENUMBER~
              <img style="float:right;margin:5px 15px" src="images/phoneIcon.png" width=32 height=32 />

          </a>
            </div>
        </div>

CSS定位元素

2 个答案: