CSS: Chiều rộng theo phần trăm và Đường viền

Question

Tôi đã xác định chiều rộng của các vùng chứa theo phần trăm. Tôi muốn thêm một biên giới (3px bên phải của một chiều rộng), vì chiều rộng container là trong% trong khi chiều rộng biên giới là trong px, làm thế nào tôi có thể điều chỉnh chiều rộng của container?

<div class="wrap"> 
    <div class="left">...</div> 
    <div class="right">...</div> 
</div> 

.wrap{ 
    width:100%; 
} 

.left{ 
    width:30%; 
} 

.right{ 
    width:70%; 
} 

Tôi muốn thêm đường viền 3px ở bên phải .left. Ví dụ:

.left{ 
    width:30%; 
    border:3px solid #000; 
} 

Vì tôi đã xác định chiều rộng bằng%, cách tốt nhất để điều chỉnh lại chiều rộng của .left là gì. Tôi có thể giảm chiều rộng xuống 29%, nhưng tôi muốn làm chính xác.

Answer 1

Sử dụng box-sizing: border-box tài sản. Nó thay đổi hành vi của mô hình hộp để xử lý padding và border như một phần của tổng chiều rộng của phần tử (không phải lề). Điều này có nghĩa là chiều rộng hoặc chiều cao của phần tử bao gồm các kích thước được đặt cho phần đệm và đường viền. Trong trường hợp của bạn, điều đó có nghĩa là chiều rộng của phần tử và chiều rộng của đường viền sẽ tiêu thụ 30% không gian có sẵn.

Hỗ trợ cho nó không phải là hoàn hảo, tuy nhiên tiền tố nhà cung cấp sẽ bắt hầu hết nếu không phải tất cả các trình duyệt hiện đại:

.left { 
    width: 30%; 
    border: 3px solid #000; 

    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Thông tin thêm có thể được tìm thấy trên MDN và Quirksmode.

According to Quirksmode, sử dụng 3 tiền tố của nhà cung cấp ở trên (-moz-, -webkit- và -ms-), bạn sẽ nhận được hỗ trợ cho tất cả các trình duyệt, ngay cả IE8.

Answer 2

Đó là một chút khó khăn nhưng hãy kiểm tra bài này trên một cách để có được xung quanh nó:

• Percentage Plus Pixel Sizing (và Example)
• Box Sizing on CSS-Tricks (và Example)

Thuộc tính box-sizing thể cũng được bạn quan tâm, hãy xem điều này:

• How do I add 1px border to a div whose width is a percentage?

Answer 3

Cách trình duyệt chéo dễ nhất là KHÔNG đặt đường viền trên div ngoài và thay vào đó đặt đường viền trên div MỚI trong .left. Đơn giản và hoạt động tốt.

Answer 4

Chỉ cần thay đổi px để vw như

border-width: 10px; 

để

border-width: 10vw; 

nó làm whats tỷ lệ làm ....