在佈局外定位圖像

我正在製作一個寬度爲960像素的網站，但如果您有更大的屏幕，我希望圖像位於標題的兩側。在佈局外定位圖像

，因爲我想保持網站爲960px寬，我需要這些額外的側面圖像瀏覽器不被計算，我可以得到它的左側

工作在這裏看到：

enter image description here

http://www.wireframebox.com/test/sideimages/index_leftworks.html

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
body { margin: 0; padding: 0; border: 0; background-color:#096 } 

img { border: 0; } 

#main { 
    width:960px; 
    height:216px; 
    background-image:url(main.jpg); 
    position:relative; 
    top:0; margin: 0 auto; 
} 



#left { 
    width:170px; 
    height:216px; 
    background-image:url(left.jpg); 
    float:left; 
    left:-170px; 
    position:relative; 
} 

#right { 
    width:170px; 
    height:216px; 
    background-image:url(right.jpg); 
    float:right; 
    left:170px; 
    position:relative; 
} 



</style> 

</head> 

<body> 

    <div id="main"> 
     <div id="left"></div> 
     <div id="right"></div> 
    </div> 
</body> 
</html>

如果你讓你的窗口更薄，那麼左邊的紅色圖像就會從站點消失，而不會導致瀏覽器窗口得到底部滾動條，但是當我嘗試在右側做同樣的事情時，它不起作用

看到這裏

enter image description here

http://www.wireframebox.com/test/sideimages/

代碼是平等的，只有<div id="right"></div>缺少

的CSS是來源。

你也可以看到它正在對本網站使用的顯示日期伸出頁面的左側，而不會影響整個網站的寬度

http://www.tequilafish.com/2009/04/22/css-how-to-pin-an-image-to-the-bottom-of-a-div/

爲什麼這項工作的離開，但不正確的？

來源

2012-03-16 russian box

我插入圖像和代碼。請想想別人讀取同樣的問題，你的網站是離線:)並請更改應用:) – Neysor 2012-03-16 05:42:20

感謝盡一切！希望有人能看到怎麼回事錯了，也不知你的意思是什麼「並請應用更改」的 – 2012-03-16 05:48:52

可能重複[佈局之外定位的圖像，而無需滾動條（http://stackoverflow.com /問題/ 9731774 /定位-AN-圖像之外的最佈局，而無需滾動酒吧 – Starx 2012-03-16 06:48:31

見下面搗鼓輸出...

小提琴：http://jsfiddle.net/C2j6G/4/

演示：http://jsfiddle.net/C2j6G/4/embedded/result/

見下文圖像 -

enter image description here

來源

2012-03-16 07:01:03 w3uiguru

這似乎是它！但是，如果我把內容放入內容div中，例如帶有超鏈接的圖像，我無法點擊它。這是如何與div如何堆疊？ – 2012-03-16 07:49:10

我對這個問題進行了排序^這是因爲我對所有這些都是陌生的，所以我把playl放在內容div裏面，並給它一個z-index：1;這似乎使內容可點擊！：O – 2012-03-16 07:53:40

非常感謝！ – 2012-03-16 07:53:50

如果你想要你的網頁是960px寬，那麼你應該改變主圖像的寬度爲960-170（左） - 170（右）。將main.jpg的寬度更改爲620px應該可以解決您的問題。

HTH

來源

2012-03-16 05:59:47 Swaraj

我想側面圖像不實現頁面的寬度來計算，它適用於左側，但不正確的。看到我的鏈接 – 2012-03-16 06:08:00

把圖像中的股利或圖片代碼比你的中心DIV較大，使其成爲中心內容div的孩子。還要確保它的定位將把它從流中（\絕對）中取出。如果您添加了負邊距，則可以在不破壞其放置位置的情況下將圖像拉出內容div。

#center div.top{ 
     width:1200px; 
     height:170px; 
     margin: 0px -170px; 
     position:absolute; 

     background:url("randombackground.png") no-repeat; 
    }

的HTML會有點像這樣：

<div id="center"> 
<div class="top"></div> 
Content content content 
</div>

來源

2012-03-16 06:10:13 rfinz

我玩過這個，但它似乎並沒有工作。不是我想要的。它把一個div我的屏幕的左側比我看不到的：S，我想要做的就是在我的頭的右邊坐着的圖像，像我一樣在左邊，並使其不添加滾動條向窗口的底部當窗口1300px和下，看到這些圖像： http://www.wireframebox.com/test/sideimages/justleft.jpg HTTP：//www.wireframebox。 com/test/sideimages/left_and_right.jpg – 2012-03-16 06:24:14

你有2張小圖嗎？你可以將它們組合成1200px寬的一個嗎？那麼我的解決方案應該工作......至於滾動的東西，你可能需要將整個頁面包裝在一個帶溢出的div中：hidden; ..也許使用一些jQuery或普通的JavaScript來保持其寬度爲100％ – rfinz 2012-03-16 06:51:16

它的更好，如果你可以結合這兩個圖像&給身體的background。像這樣：

HTML

<div id="main"></div>

CSS

body { 
margin: 0; 
padding: 0; 
background:#096 url(http://imgur.com/JHXDv.png) no-repeat top center; 
} 

#main { 
    width:960px; 
    height:216px; 
    background-image:url(http://www.wireframebox.com/test/sideimages/main.jpg); 
    margin:0 auto; 
}

入住這http://jsfiddle.net/PVWzA/1/

來源

2012-03-16 06:43:57 sandeep

謝謝你在這方面的工作。是的，我知道有一張圖像跨越頂部，但我想保持它與其他圖片分開/浮動。你所建議的是一種做法，但不是我想要的。非常感謝！ – 2012-03-16 07:55:23

在佈局外定位圖像

回答

相關問題