Question

由于没有做足够的研究，我可能会对一些用户感到沮丧。然而，我在这个问题上花了2天时间，缺乏“寻找什么”是找到我的。因此，如果这个问题得到解答，我向人们道歉。

我为某人建立一个网站作为一个帮助，并使用免费模板这样做： http://sg-layout.com/demo/Eve/subpage.html

这是我的问题：在上面提供的链接中，当您调整窗口大小时，您将在全屏幕上看到彼此相邻的2个网格布局....左侧div（表示样式的那个）位于正确的div（风格游乐场）。这是完美的，但我希望使用左div作为导航菜单。这意味着当用户向下滚动页面时，它会向下移动，这将是史诗般的。通过应用位置：固定，它将实现这一点。然而它重叠，正确的div，几乎就像现在正确的div网格忽略它的左div。我通过为两个div应用更固定的宽度而不是基于百分比的流体布局来修复此问题。我还介绍了左浮动和浮动到每个div。然而，当我调整屏幕大小时，它确实开始重叠，而不是左侧div移动到右侧div顶部的酷炫功能。很可能是因为我不再使用流体类型布局。

是否有人可以在此问题上向我展示教程/上一篇文章？我对流体布局非常新，我似乎无法使其正常工作。我再次为这个极长的解释道歉，我希望通过解释到目前为止我所做的一切，你可以了解我尝试过的一些修复。

概要

如果我的解释太乱了。下面简要总结一下我想要实现的目标：

当用户向下滚动页面时，Div向左移动
如果用户调整屏幕大小（在手机平板电脑上使用它），则左侧div不重叠，只是移动到顶部或类似的东西。

感谢名单！

Answer 1

您可以使用@media queries为不同的屏幕尺寸制作自己的特殊样式（传统上您可以使用移动/平板电脑/桌面/高rez样式集）。

就解决固定位置导航问题而言，当您设置要修复的元素的位置时，您实际上是将该元素从页面中拉出。

我一直认为它就像你的页面是一张很长的纸，你正在通过眼镜看你的页面。当您设置要固定的位置时，您正在将该元素块从页面中切出，并将其附加到您的眼镜上。因为元素在您的眼镜上而不在文档中，所以页面上的其他所有内容都会向上移动以填充该空间。

你有选择权，通过为酒吧留出空间，你可以规避问题。这样做的两种传统方式是添加边距（在这种情况下为顶部或左边）或通过创建间隔div。无论哪种方式你都必须玩它。

我建议为您的页面的一个尺寸创建一个很好的布局，然后关注自己的其他尺寸（即最大宽度：480/960 /等）并完善每个尺寸，而不是试图在同一个地方完成所有尺寸时间

Answer 2

你可以做点什么，

<style type='text/css'>
  @import 'maincss.css';
  @import 'smallscreen.css' (max-width:480px);
</style>

使用两个外部样式表，或在同一样式表上使用@media规则。以下链接可能有所帮助： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

确保您的@import高于其他所有CSS。

流体布局，导航栏向下移动但在窗口调整大小时重叠

2 个答案: