0

我需要帮助来修复 Wordpress 中的右侧边栏，以便在屏幕上以不同的分辨率大小看到时它不会移动？

右侧边栏的 CSS

#socialsidebar { 
   float: right; 
   position: relative; 
   overflow: hidden; 
   margin-right: 200px; 
   margin-top: 200px; 
   height: auto; 
   width: 194px; 
}

容器/页面的 CSS

body { 
   min-width: 960px; 
}
.container_12 { 
   background: #fdfdfd; 
   margin-left: auto; 
   margin-right: auto; 
   width: 960px; 
}
4

1 回答 1

1

你需要了解positionCSS 的属性。

您必须注意一些拇指规则。

  1. 避免不必要的水平滚动。
  2. 尽量不要给出静态高度，因为你总是有无限的高度可供使用。用于height:auto更大的容器。
  3. 为此类容器提供静态尺寸，您知道大多数分辨率都可以容纳这些尺寸。
  4. 避免内联 css - 尝试尽可能多地定义通用 css。
  5. 决定您的应用使用的可能分辨率范围。然后开始编写 CSS。
  6. 最重要的是，始终在 IE（最大挑战）上交叉验证您的 CSS（在您编写时）。

大多数时候，最好的方法是它应该简单且易于修改。

看到您需要将整个屏幕视为一个坐标系，其原点位于左上角，Y 轴向下。

这是关于 CSS-Position 属性的最佳文章之一。通过它。它将帮助您了解左、右、上、下的工作方式。

现在，我制作了一个超级简单的示例，满足您的需求。即正确的导航，它在任何分辨率下都保持稳定。

采样小提琴

在此示例中您应该注意到的是，宽度、高度、顶部、左侧的百分比的广泛使用。和位置属性。

你可以相应地修改它。或从中获取参考。还有一件事，你不需要做position:absolute，我正在做，因为我想通过它的顶部，左，右底部属性为容器提供尺寸，你可以通过百分比和position:relative。

于 2013-03-04T08:58:52.620 回答