你会如何定位这些图像？

Question

http://elektrikhost.com/

你看到列上标题的企鹅了吗？我试图让他们超过标题和列表。我想知道你会做什么？使用绝对位置还是相对位置？我被卡住了。

HTML：

<section class="starter">
 <img src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon">
  <h2>Starter Plan</h2>
  <ul>
    <li><span>5GB Disk Space</span></li>
    <li><span>Unmetered Bandwidth</span></li>
    <li><span>Unlimited Add-on Domains</span></li>
    <li><span>Unlimited Subdomains</span></li>
    <li><span>Unlimited Email/FTP Accounts</span></li>
    <li><span>Unlimited MySQL Databases</span></li>
    <li><span>Shell access upon request</span></li>
  </ul>
  <img src="images/starterplan.png" width="192" height="51" alt="Starter Plan">
</section><!-- //.starter -->

.plan-icon是图片。 需要看起来像这样：

Answer 1

您只需将图片样式设置为float: right

即可

Answer 2

.starter { position: relative; }
.starter img { position: absolute; top: 5px; left: 140px; }

这个想法是图像被定位为“绝对”，因此它可以位于其父元素“.starter”范围内的任何位置。如果“.starter”未设置为relative，则无效。

我让它在Firebug中工作，.starter img选择器可能需要改变，但它的绝对定位的想法，你应该从中拿走。

Answer 3

试

<img src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon" style="float:right;">

我甚至可能会建议添加padding: 5px 5px;，但那只是我......

Answer 4

使用相对定位。你也可以给它z-index把它放在任何元素的“顶部”。

无论如何，请看一下这个页面。它可以帮助你：

http://w3schools.com/CSS/css_positioning.asp

Answer 5

如果是我，我会添加这个CSS。

#plans-wrap section { position: relative; }
#plans-wrap section  .icon { position: absolute; right: 0px; top: 0px; }