在布局外定位图像

我正在制作一个宽度为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

在布局外定位图像

回答

相关问题