css - css3 calcを使用してdivの「left」プロパティを設定するにはどうすればよいですか？

Question

親の幅に応じて、divのleftプロパティを正確な場所に設定しようとしています。

具体的には、「left」プロパティをその親の幅（350px）にします。

私はcss3のcalcをこのように使用しようとしています（左：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;
    }