Question

我有这个网站，我需要在内容的每一面的页面顶部放置两个图像。暂时可以到达[已删除]。

如果您的分辨率足够宽，您可以看到左右红色圣诞装饰与主要内容对齐。但是，如果浏览器小于~1300px，那么正确的那些不会从页面流中取出并创建一个水平滚动条。

我通过将具有背景的两个绝对定位的div放入相对定位的div中来实现这两个装饰：

<div id="alignment"> <!-- position:relative -->
 <div></div> <!-- first image: position:absolute;right:-210px -->
 <div></div> <!-- second one: position:absolute;right:915px -->
</div>

虽然绝对定位的元素应该从文档流中取出，但第二个图像不是:(因此，底部的滚动条出现。

我尝试了什么：

制作两个装饰品的图像，其中空白区域的910px（内容宽度）分开，只使用一个绝对div而不是两个：同样的问题
将上述图片添加为no-repeat top center <html>背景，导致仅显示一个背景。要么body bg上有雪花，要么在纯白色背景上有红色饰物。后者取决于两个（body或html）元素中的哪一个具有哪个图像作为背景。
将图像div放在绝对div中并使两个相对（与当前情况相反） - 同样的问题并且不会显示在< IE8上

我知道并且抱歉这是一个很大的问题而且很难理解。我研究了很多，而且没有想法。任何可能的尝试解决方案将不胜感激。此外，我意识到我链接到的网站的编码处于可怕的边缘，但我刚刚开始研究它，所以没有评论，请：）

Answer 1

最终的解决方案是创建一个div，它在正文后面打开并包含所有内容，在正文之前关闭。 div的风格：

background: url('/client/images/xmas-burbulai.png') no-repeat top center;

png本身是我想要在身体两侧的两个装饰品。这两张照片都粘贴在一张照片中，照片之间有一个910px的空隙 - 身体的确切宽度。

没有滚动条，交叉浏览器，时尚。

Answer 2

尝试将此div（#alignmen）设置为：

溢出：隐藏;

更新

<div id="main"> //Position this relatively
   <div> //Positon this absolutely, this height should be the max of the two floated divs
     //In here 
     <div>Left</div>//Float Left
     <div>Right</div>//Float Right
   </div>
<div>

主要内容周围的背景元素的问题

2 个答案: