你會如何定位這些圖像？

你看到企鵝那是在列上的標題？我試圖讓他們超過標題和列表。我想知道你會做什麼？使用絕對位置，還是相對？我卡住了。

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

。計劃圖標是圖像。需要看起來像這樣： alt text

來源

2010-10-10 omnix

你可以簡單地設置圖像風格float: right

來源

2010-10-10 22:00:25

它驚人的如何這是一個爲我工作的人。 – omnix 2010-10-18 08:01:26

嘗試

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

我甚至建議增加一個padding: 5px 5px;到，不過這只是我...

來源

2010-10-10 21:53:40 jcolebrand

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

的想法是，圖像被定位爲「絕對」，因此它可以位於其父元素「.starter」的範圍內的任何位置。如果「.starter」未設置爲相對，這將不起作用。

我得到了這個在Firebug的工作，.starter IMG選擇器可能需要改變，但它的絕對定位的想法，你應該從這個。

來源

2010-10-10 22:00:06 Tom

但這是非常複雜的方法 – jcolebrand 2010-10-10 22:19:25

的對於使用內嵌樣式應有的尊重意味着他必須申請相同的風格到每一個企鵝形象。這與DRY的編程想法背道而馳，並且不會很好維護。該方法或我的解釋混淆？ – Tom 2010-10-10 22:50:29

使用相對定位。您也可以給它一個z-index以將它放在任何元素的「頂部」。

無論如何，看看這個頁面。它應該幫助你：

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

來源

2010-10-10 22:00:09

真的不能幫助他做什麼，並且內聯元素上的z-index沒有太多好處（雖然我可以考慮一些原因來做到這一點） – jcolebrand 2010-10-10 22:17:24

當然可以。使用相對定位，他可以將其定位在相對於其自然位置的任何位置。 – 2010-10-10 22:44:21

儘管使用相對位置保持背景，但我試圖從背景中取出圖像。哦，我想我必須將他們全部定位。 [感謝上帝的螢火蟲] – omnix 2010-10-11 03:07:48

如果是我，我會添加這個CSS。

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

來源

2010-10-10 22:51:46 babtek

你會如何定位這些圖像？

回答

相關問題