Question

首先，有3个单独的图像。一只小鸡，“交付”和“食物”这个词我想以这种方式对齐它们 - ＆gt; 3 images 是否有任何方法可以实现这样的定位，即使调整浏览器窗口大小并可能解决问题，也可以保持不变的位置？

绝对和相对定位都有效，但调整浏览器大小会搞砸一切。边缘似乎无法做到这一点。或者我只是不太熟练。

HTML代码如下：

<!doctype html>

<html>
<head>
    <meta charset="UTF-8"/>
    <title> Foodstant Delivery </title>
    <link rel="stylesheet" type="text/css" media="screen" href="stylo.css" />
    <link rel="shortcut icon" href="favicon.ico" />
</head>

<body>

<figure>
<img id="del" src="images/delivery12.png" alt="Delivery" />
<img id="foo" src="images/foostant2.png" alt="Foodstant" />
<img id="chi" src="images/logochick.png" alt="Chick" />
</figure>

<nav id="hnavbar">
    <ul id="hli">
        <li><a id="home" href="index.html">Home</a></li>
        <li><a id="menu" href="menu.html">Menu</a></li>
        <li><a id="cu"   href="ContactUs.html">Contact Us</a></li>
        <li><a id="au"   href="aboutus.html">About Us</a></li>
        <li><a id="tc"   href="TC.html">Terms & Conditions</a></li>
        <li><a id="job"  href="jobs.html" target="_blank">Jobs</a></li>
        <li><a id="yo"   href="order.html">Your Order</a></li>
    </ul>   
</nav>

</body>

CSS代码如下

/* Foodstant Delivery */

* {
margin: 0;
padding:0;
  }
 body { font-family: 'Comic Sans MS',Verdana,Helvetica,Courier New,sans-serif;
background:url("images/bg.jpg");    
   }
   /* home page */
  #hnavbar{
font-size:2em;
margin-top:-13em;
}
  #hnavbar ul li {
    list-style-type:none;       
    width:325px;
    display:inline;
    padding:0 13px 0 13px; 
    }
  #chi {
position:relative;
top:-30em;
left:10em;
       }
  #foo {
position:relative;
top:1em;
left:-11em;
   }
  #del {
position:relative;
top:10.5em;
left:26em;
}
 /* home page */

非常感谢提前。

Answer 1

我最近不得不做一些与此非常相似的事情，过了一段时间后我决定必须对每个链接使用绝对定位。代码的问题在于，您似乎并不完全了解相对和绝对定位的工作原理。绝对对象总是相对于它设置为“相对位置”的更近的父对象。所以你应该试试这个：

#hnavbar { position: relative; } //all "absolute" children will be relative to this hnavbar
#home, #menu, ... { position: absolute; }

然后，您应该设置每个绝对定位菜单链接的位置，包括顶部/左侧或底部/右侧属性。

对于图像，如果你没有“Foodstant”和“Delivery”的链接，我真的会使用一张图片。

希望它有所帮助！

Answer 2

以百分比形式指定顶部和左侧的值，而不是“em”。这些百分比将相对于包含这些图像的父元素。或者只使用一个图像而不是3个并使用图像映射。这是一个coupla在线工具：

http://www.mobilefish.com/services/image_map/image_map.php
http://www.image-maps.com/

如何确保所有图像在不同的浏览器窗口/分辨率下正确对齐？

2 个答案: