我不知道如何正确地标题,但这是我的问题:
我有这个布局:
<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中完成吗?
答案 0 :(得分: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
不,它不是很漂亮,但是......
答案 1 :(得分:0)
我不确定我是否完全理解您的问题,但您不能仅使用right
属性而不是left
吗?
答案 2 :(得分:0)
通常当我遇到精确定位的麻烦时,因为我还没有指定定位元素的宽度。浏览器会尝试自己计算,这可能会让事情发生。
有什么方法可以在它不再正确定位时发布它的样子吗?
答案 3 :(得分:0)
你的意思是......
#button
{
position: fixed;
right: 20px;
}
......或者你想要的任何距离在右边?或其他什么?
答案 4 :(得分:0)
我想知道你是否正在寻找浮动:正确的财产。 你能看一下http://jsfiddle.net/n6UPF/1/,看看那是不是你想要的。
答案 5 :(得分: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
}