10

我不知道如何正确命名，但这是我的问题：

我有这个布局：

<html>
<body>
    <div id="content">this is my page</div>
    <div id="button">magic button</div>
</body>
</html>

CSS：

#button {
  position: fixed;
  bottom: 20px;
  background-color: #f00;
  padding: 5px;
  left: 50%;
  margin-left: 250px;

}

html, body{
  height: 100%;
}
#content {
  margin: 0 auto;
  width: 700px;
  min-height: 100%;
  background-color: #eee;
}​

在这里看小提琴：http: //jsfiddle.net/n6UPF/

图片

我的页面按我想要的方式工作，按钮正是我想要的位置。

但是，如果我更改按钮上的文本，它将不再正确定位。

我想将它相对于我的内容区域的右边缘“固定”。

这可以在纯 CSS 中完成吗？

4

6 回答 6

10

如果可以接受修改 HTML，则可以使用包装器：

<div id="button-wrapper">
    <div id="button">magic button</div>
</div>

#button-wrapper {
    bottom: 40px;
    left: 50%;
    margin-left: 350px;
    position: fixed;
}

#button {
    background-color: red;
    padding: 5px;
    position: absolute;
    right: 10px;
    white-space: nowrap;
}

http://dabblet.com/gist/3740941

不，它不是很漂亮，但是...

于 2012-09-18T02:36:24.137 回答
1

你的意思是...

#button
{
    position: fixed;
    right: 20px;
}

...或者你想要在右边的任何距离？或者是其他东西？

于 2012-09-18T02:27:11.873 回答
0

我不确定我是否完全正确理解了你的问题，但你能不能只使用该right属性而不是left?

示例：http: //jsfiddle.net/baKra/

于 2012-09-18T02:25:16.547 回答
0

通常当我遇到精确定位问题时，这是因为我没有指定定位元素的宽度。浏览器会尝试自己计算它，这可能会导致事情失败。

当它不再正确定位时，有什么方法可以发布它的样子吗？

于 2012-09-18T02:26:18.613 回答
0

我想知道您是否正在寻找 float:right 属性。你能看看http://jsfiddle.net/n6UPF/1/看看那是不是你要找的。

于 2012-09-18T02:29:00.833 回答
0

尝试改变

#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
left: 50%;
margin-left: 250px;
}

到

#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
right:20px
}
于 2012-09-18T02:39:12.153 回答