在布局外定位图像 [英] Positioning an images outside of the layout
问题描述
我在制作一个宽度为960像素的网站，但我想要的标头两侧的图片，如果你有一个更大的屏幕。
因为我想为了保持网站的960px宽我需要这些额外的侧面图像不被浏览器计数，我可以让它在左边工作
看到这里：
>
代码相等，只有< div id =right>< / div> 缺少
css在源代码中。
你也可以看到它在这个网站上使用，显示左边的日期，而不会影响整个网站的宽度。
http://www.tequilafish.com/2009/04/22/css-how-to-
为什么这在左边工作，但不是正确的？
/ p>请参阅下面的小提示输出...
< http://jsfiddle.net/C2j6G/4/
演示： http://jsfiddle.net/C2j6G/4/embedded / result /
请参阅下面的图片 -
I am making a website thats 960px wide but I want images on both sides of the header that you can see if you have a bigger screen.
because I want to keep the site 960px wide I need these extra side images to not be counted by the browser, I can get it to work on the left
see here:
http://www.wireframebox.com/test/sideimages/index_leftworks.html
Code:
<!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>
if you make your window thinner the left red image disappears off the site without causing the browser window to get a bottom scroll bar, however when I try and do the same thing to the right side it doesn't work
see here
http://www.wireframebox.com/test/sideimages/
Code is equal, only <div id="right"></div> is missing
the css is in the source.
you can also see it being used on this site to show the date sticking out the left of the page, without impacting the overall sites width
http://www.tequilafish.com/2009/04/22/css-how-to-pin-an-image-to-the-bottom-of-a-div/
why does this work on the left but not the right?
See the below fiddle for output...
Fiddle: http://jsfiddle.net/C2j6G/4/
Demo: http://jsfiddle.net/C2j6G/4/embedded/result/
see below image -
这篇关于在布局外定位图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
