CSS定位元素

我正在用jquery mobile构建移动web应用程序。现在我拥有了。我有一个可以在this link上看到的合作元素。现在，我从数据库中获取的每条记录都会创建一个新的合作元素。这是我的合作元素的代码。CSS定位元素

<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个图像的电话图标和邮件图标。就像上面的定位一样，它们只在我的第一个合作元素的前两个按钮上。但是我需要做些什么才能使这些按钮也出现在我的后续按钮上？

所以我的问题是，我怎么能这2个按键位置，与ID =“按钮”股利。

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

亲切的问候，

燕姿

来源

2012-03-26 Steaphann

您能否提供一个链接到您的实际页面，或在jsfiddle.net工作示例，以便我们可以看到究竟是哪里出了问题？ – 2012-03-26 08:41:50

我编辑我的问题 – Steaphann 2012-03-26 08:58:31

正如我怀疑的那样，图标的绝对定位是罪魁祸首。您正在使用position:absolute和顶部偏移量定位两个图标，但周围没有任何元素，因此需要使用position:relative。这意味着定位起点回落到页面顶部。

换句话说，你的第二个（和第三，第四等如果你有更多的结果）图标集在那里，但他们被放置在前两个图标相同的地方：正好在290px和360px距离页面顶部。

相反，与<a>元素是每个项目里面的图标IMG和位置放置相对它的周围。这可能会工作：

<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>

来源

2012-03-26 09:11:03

它的工作原理，谢谢！ – Steaphann 2012-03-26 09:23:56

您需要分配position:relative到buttons的div，然后更改第一img位置top:15px和第二IMG（电话图标）说top:75px什么合适。

到它包含buttons DIV你将因此位置关系每个img元素。在你的例子中，所有的图像叠加起来，因为它们是absolute与窗口有关。

来源

2012-03-26 09:10:18

回答

相关问题