如何使用css3 calc设置div的'left'属性？

Question

我试图将div的left属性设置在一个确切的位置，具体取决于其父级的宽度。

具体来说，我希望＆＃39;离开＆＃39;属性为其父宽度 - 350px。

我试图像这样使用css3的计算（左：calc（100％ - 350px））无济于事。这可能是因为100％正在查看左侧属性而不是父级宽度...

这有可能吗或我做错了什么？

由于

<div id="login5" class="login">
    <h3>Login</h3>

    // code 

</div>

然后在我的CSS中：

#login5 {
    position: absolute;
    width: 260px;
    left: calc(100% - 350px);
    background-color: rgba(50, 50, 50, 0.6);
    padding: 20px;
    }

Answer 1

它应该可以使用（在Chrome / Safari / Firefox / IE9 +上）：http://jsfiddle.net/GXbJT/

根据Can I Use，Opera不支持它。基于WebKit的浏览器仍然需要特定于供应商的前缀：

left:-webkit-calc(100% - 350px);
left:-moz-calc(100% - 350px);
left:calc(100% - 350px);

Answer 2

测试：

transform: translateX(25px);

然后将标签移到右侧，或

transform: translateX(-25px);

然后向左移动。

Answer 3

我将left属性更改为width，只需检查它。

 #login5 {
    position: absolute;
    width: 260px;
    width: calc(100% - 350px);
    background-color: rgba(50, 50, 50, 0.6);
    padding: 20px;
    }