Làm thế nào để thiết lập thuộc tính 'trái' của div của tôi bằng cách sử dụng css3 calc?

Question

Tôi đang cố gắng đặt thuộc tính bên trái của div ở một vị trí chính xác tùy thuộc vào độ rộng của cha mẹ.

Cụ thể tôi muốn thuộc tính 'bên trái' là chiều rộng gốc - 350px.

Tôi đang cố gắng sử dụng calc của css3 như thế này (trái: calc (100% - 350px)) không có kết quả. Điều này có thể là vì 100% đang xem thuộc tính bên trái thay vì chiều rộng của cha mẹ ...

Điều này có thể xảy ra hoặc tôi đang làm gì sai?

Cảm ơn

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

    // code 

</div> 

Sau đó, trong css của tôi:

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

Answer 1

Nó sẽ làm việc (trên Chrome/Safari/Firefox/IE9 +): http://jsfiddle.net/GXbJT/

Theo Can I Use, Opera không hỗ trợ nó. Và nhà cung cấp cụ tiền tố vẫn còn cần thiết cho các trình duyệt dựa trên Webkit:

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

Answer 2

Tôi đã thay đổi sở hữu trái với chiều rộng, chỉ cần kiểm tra xem nó.

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

Answer 3

Thử nghiệm với:

transform: translateX(25px); 

và bạn di chuyển thẻ của bạn ở bên phải, hoặc

transform: translateX(-25px); 

và bạn di chuyển sang trái.