我正在製作一個寬度爲960像素的網站,但如果您有更大的屏幕,我希望圖像位於標題的兩側。在佈局外定位圖像
,因爲我想保持網站爲960px寬,我需要這些額外的側面圖像瀏覽器不被計算,我可以得到它的左側
工作在這裏看到:
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>
如果你讓你的窗口更薄,那麼左邊的紅色圖像就會從站點消失,而不會導致瀏覽器窗口得到底部滾動條,但是當我嘗試在右側做同樣的事情時,它不起作用
看到這裏
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/
爲什麼這項工作的離開,但不正確的?
我插入圖像和代碼。請想想別人讀取同樣的問題,你的網站是離線:)並請更改應用:) – 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