Question

当窗口太窄或点击图像缩略图时，波纹管网页的div移位不对齐。有没有办法防止这种情况发生？

http://nosgoth.net/NR-Test/ff_scroll-test3.html

请注意，“frametop”div和“framebtm”div包含插入到html中的图像，而“text”，“content”和“container”div则使用背景图像。感谢。

Answer 1

所以，你的问题是你的背景图像处于与视口相关的固定和居中位置。它们本身都不是问题，但它们一起试图在屏幕中心的同时保持固定的位置。当屏幕小于图像本身时，它会导致问题。不幸的是，如果你删除其中一个，它会破坏你的预期输出。

解决这个问题的一种方法是使用媒体查询（如Trix和afelixj）建议。另一种方法是重做代码而不使用背景图像。我采用了这种方法。

我没有将框架的每一部分构建在用于内容的元素上，而是将它们移动到他们自己的div #frame中。通过一些固定的定位，您的原始概念仍然没有受到损害。但是，它没有响应（尽管你可以很容易地使百分比和视口单元变得流畅）。

这是我重写它的方式的条纹概念：

CSS：

#frame .scroll_bg,
#frame .frametop,
#frame .frame_sides,
#frame .framebtm,
#frame .side_decor {
  display: block;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
}

#frame .side_decor {
  top: 50%;
  transform: translate(-50%, -50%);
}

#frame .scroll_bg,
#frame .frame_sides,
#frame .side_decor {
  z-index: -5;
}

#frame .scroll_bg,
#frame .frametop,
#frame .frame_sides {
  top: 0;
}

#frame .framebtm {
  bottom: 0;
}

HTML：

<div class="content">...</div>
<div id="frame">
  <img class="scroll_bg" src="http://nosgoth.net/NR-Test/images/scroll_bg.png" alt="" />
  <img class="frame_sides" src="http://nosgoth.net/NR-Test/images/frame_sides.png" alt="" />
  <img class="side_decor" src="http://nosgoth.net/NR-Test/images/side_decor.png" alt="" />
  <img class="frametop" src="http://nosgoth.net/NR-Test/images/frametop.png" alt="" />
  <img class="framebtm" src="http://nosgoth.net/NR-Test/images/framebtm.png" alt="" />
</div>

我将框架放在底部（因此它将位于其他所有顶部）并将每个部分移动到固定位置的位置。滚动背景，侧边栏和侧面装饰被赋予负z-index，以便所有内容都位于其上方并保持可点击状态。

之后它只是让一切都合适。我玩了一些你的价值观，但是大部分代码都是你的（代码和html是我修改的其他地方）。

当底部点击图像时，整个过程仍然会移动，但我怀疑这是fancybox的问题。

这是final result。

的代码

Answer 2

多数民众赞成因为div

<div class="text"></div>

有一个固定宽度的背景图片：

.text {
    background-image: url(images/side_decor.png);
}

如果您想在不同的浏览器窗口大小中正确使用它，您可以考虑使用side_decor.png的多个副本，并为不同的broswer宽度分配主题，如下所示：

@media screen and (max-width: 400px){
    .text {
        background-image: url(images/side_decor_400.png);
    }
}
@media screen and (min-width: 400px) and (max-width: 800px){
    .text {
        background-image: url(images/side_decor_800.png);
    }
}

Answer 3

要快速修复，请尝试添加以下样式

body{
    max-width: 814px;
    width: auto;
}
.frametop, .framebtm {
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 680px){
    body{
        overflow-x: hidden;
    }
    img{
        height: auto;
        max-width: 100%;
    }
    .text{
        padding: 0 20px;
    }
}

Divs互相转移

3 个答案: