我正在制作一个宽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/
为什么这个工作在左边但不是正确的？
