6

我无法让定位、最大宽度和“正确：0px”和谐地一起工作！我正在创建一个固定在我网站右上角的 div。页面内容的最大宽度为 1000 像素，但是标签仅遵守我的“右：0 像素”规则并坚持向右，一旦达到最大宽度就会不遵守。还应该注意的是，默认情况下，div 在左上角并遵守最大宽度（如果我输入 'left: 0px;' 但它不遵守规则，它会粘在左边）。

CSS：

#content {
margin: 0 auto;
max-width: 1000px; }

#div {
width: 150px;
position: fixed;
right: 0px; }

以下是我已经尝试过的一些替代方案：

  • width: 100% (with text-align: right) <--- 不太正确，我不喜欢 100% 的宽度而不是 150px
  • 添加代码以在 html 中“手动”定位 div（不是 CSS）
  • 我发现 float 和 text-align 不会影响固定定位

非常感谢您的帮助！谢谢你。

4

5 回答 5

14

如果我理解正确，这就是你所追求的。

您需要添加一个具有绝对位置的容器以将内容移到右侧，然后使用固定位置的容器将其保持在您需要的右上角。

于 2012-07-13T09:57:33.723 回答
3

如果您不想添加额外的绝对容器，则可以选择

#div {
  width: 150px;
  position: fixed;
  right: calc(50% - 500px); /* will move the div as far as 50% of viewport
  then move it back to 500px (that is half of max-width) */
}

/* if needed, you can add media query */
@media (max-width: 1000px) {
  right: 0;
}
于 2017-01-27T02:06:43.250 回答
0

我让它在jsfiddle中正常工作。您可能想查看影响该区域的 CSS。如果#content 不是块级元素（不会应用宽度等），您可能会遇到问题。您提供的更多代码将非常有帮助，因此我们确切地知道发生了什么并可以为您提供更多帮助。

于 2012-07-13T09:03:56.167 回答
0

我想你需要这个：

#content {
  margin: 0 auto;
  max-width: 1000px; 
  height:20px;
  background:yellow;
  position: relative;
}
#div {
  width: 150px;
  position: absolute;
  right: 0px;
}
于 2012-07-13T09:07:19.510 回答
0

position:fixed 与任何容器都不相关。它相对于 DOM 的 html 元素。这就是为什么无论您对#content 做什么，您都会在极右端看到它。

于 2012-07-13T09:12:34.883 回答