如何设置我的div的'left'属性使用css3 calc？ [英] How to set the 'left' property of my div using css3 calc?

问题描述

我试图设置div的一个精确位置的左边属性，具体取决于它的父元素的宽度。

I am trying to set the left property of a div in an exact location depending on the width of its parent.

具体来说，我希望left属性为其父宽度 - 350px。

Specifically I want the 'left' property to be its parent width - 350px.

使用css3的计算像这样（左：calc（100％ - 350px））没有效果。这可能是因为100％正在查看左侧属性而不是父级宽度...

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...

这是可能的还是我做错了？

Is this possible at all or what am I doing wrong?

感谢

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

推荐答案

/ Safari / Firefox / IE9 +）： http://jsfiddle.net/GXbJT/

It should work (on Chrome/Safari/Firefox/IE9+): http://jsfiddle.net/GXbJT/

根据我可以使用，Opera不支持它。基于WebKit的浏览器仍然需要供应商特定的前缀：

According to Can I Use, Opera doesn't support it. And vendor-specific prefix is still required for WebKit-based browsers:

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

这篇关于如何设置我的div的'left'属性使用css3 calc？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！