CSS 如何使用 css3 calc 设置我的 div 的“左”属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14137986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set the 'left' property of my div using css3 calc?
提问by Marcel
I am trying to set the left property of a div in an exact location depending on the width of its parent.
我试图根据其父级的宽度将 div 的 left 属性设置在一个确切的位置。
Specifically I want the 'left' property to be its parent width - 350px.
具体来说，我希望 'left' 属性是它的父宽度 - 350px。
I am trying to use css3's calc like this (left: calc(100% - 350px)) to no avail. This probably is because 100% is looking at the left property instead of the parent's width...
我正在尝试像这样使用 css3 的 calc (left: calc(100% - 350px)) 无济于事。这可能是因为 100% 正在查看 left 属性而不是父级的宽度...
Is this possible at all or what am I doing wrong?
这是可能的还是我做错了什么？
Thanks
谢谢
<div id="login5" class="login">
<h3>Login</h3>
// code
</div>
Then in my css:
然后在我的 css 中：
#login5 {
position: absolute;
width: 260px;
left: calc(100% - 350px);
background-color: rgba(50, 50, 50, 0.6);
padding: 20px;
}
回答by Passerby
It should work (on Chrome/Safari/Firefox/IE9+): http://jsfiddle.net/GXbJT/
它应该可以工作（在 Chrome/Safari/Firefox/IE9+ 上）：http: //jsfiddle.net/GXbJT/
According to Can I Use, Opera doesn't support it. And vendor-specific prefix is still required for WebKit-based browsers:
根据Can I Use，Opera 不支持它。基于 WebKit 的浏览器仍然需要特定于供应商的前缀：
left:-webkit-calc(100% - 350px);
left:-moz-calc(100% - 350px);
left:calc(100% - 350px);
回答by ADOLFO MARTIN GONZALEZ
Test with:
测试：
transform: translateX(25px);
and you move your tag to the right, or
然后将标签向右移动，或者
transform: translateX(-25px);
and you move to the left.
然后你向左移动。
回答by naresh kumar
I changed the left property to width, just check it.
我将左属性更改为宽度，只需检查它。
#login5 {
position: absolute;
width: 260px;
width: calc(100% - 350px);
background-color: rgba(50, 50, 50, 0.6);
padding: 20px;
}
