0

我可能会因为没有做足够的研究而受到一些用户的抨击。然而，我在这个问题上花了 2 天时间，并且缺乏“寻找什么”让我感到困惑。因此，如果这个问题已经得到解答，我向人们道歉。

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

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

有没有人可以给我看一个关于这个问题的教程/以前的帖子？我对流体布局非常陌生，我似乎无法让它工作。再次为这个冗长的解释道歉，我希望通过解释我到目前为止所做的事情，你可以了解我尝试过的一些修复。

概括

如果我的解释太混乱了。以下是我试图实现的目标的快速总结：

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

谢谢！

4

2 回答 2

1

你可以做类似的事情，

<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/

确保你的@imports 高于所有其他 CSS。

于 2013-08-27T01:04:00.073 回答
1

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

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

我总是认为您的页面是一张长纸，而您正在通过眼镜查看页面。当您将位置设置为固定时，您将从页面中剪下该元素片段，并将其附加到您的眼镜上。因为该元素在您的眼镜上而不是在文档中，所以您页面上的其他所有内容都会向上移动以填充该空间。

你有选择，通过为酒吧留出空间，你可以规避这些问题。执行此操作的两种传统方法是添加边距（在本例中为上边距或左边距）或创建间隔 div。无论哪种方式，你都必须玩它。

我建议为您的页面的一种尺寸创建一个很棒的布局，然后关注其他尺寸（即最大宽度：480/960/等）并完善每个尺寸，而不是同时尝试所有这些尺寸

于 2013-08-27T00:55:09.670 回答