Div 彼此不对齐

Question

当 window 太窄或单击图像缩略图时，以下网页的 div 会错位。有什么办法可以防止这种情况发生吗？

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

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

Answer 1

那是因为这个div

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

具有固定宽度的背景图像：

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

如果你想在不同的浏览器 window 大小下正确制作它，你可以考虑拥有多个副本 side_decor.png 并为不同的浏览器宽度分配主题像这样：

@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 2

为了快速修复，请尝试附加以下样式

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;
    }
}

Answer 3

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

修复它的一种方法是使用媒体查询（如 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，以便所有内容都在它上面并保持可点击。

在那之后，一切都变得合适了。我对你的价值观进行了一些尝试，但大部分代码的其余部分都是你的（body 和 html 是我修改的唯一其他地方）。

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

这是 final result.

的代码笔

Div 彼此不对齐

Divs Shift Out of Allignment with Each Other

html

css

dreamweaver