gpt4 book ai didi

css - 指定固定位置的右边距

转载 作者:技术小花猫 更新时间:2023-10-29 10:37:37 26 4
gpt4 key购买 nike

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

我有这样的布局:

<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;
}​

在这里查看 fiddle :http://jsfiddle.net/n6UPF/

image

我的页面按我想要的方式运行,按钮正是我想要的位置。

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

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

这可以用纯 CSS 完成吗?

最佳答案

如果可以接受修改 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

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

关于css - 指定固定位置的右边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12469476/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com