Hiển thị khối nội tuyến với chiều rộng là phần trăm

Question

Tôi đang cố gắng đặt 2 phần bên cạnh nhau bằng cách sử dụng inline-block và chiều rộng dưới dạng phần trăm, nhưng nó không làm đầy toàn bộ chiều rộng của cửa sổ của tôi.

Những gì tôi có cho đến nay:

HTML

<section class="left-content"> 
    "Some Code" 
</section> 
<section class="main-content"> 
    "Some More Code" 
</section> 

CSS

.left-content, .right-content { 
    width: 15%; 
    min-width: 150px; 
    padding: 5px; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
} 
.main-content { 
    width: 85%; 
    min-width: 712px; 
    padding: 10px; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
} 

Nhưng trừ khi tôi làm việc ra các tỷ lệ chính xác xuống một dấu thập phân trên màn hình của tôi nó không công việc. Có ai biết cách để làm điều này bằng cách sử dụng inline-block hoặc tôi có phải sử dụng float không?

Answer 1

Đó là do không gian trắng và ngắt dòng trong đánh dấu HTML của bạn gây ra sự cố này. Có hai lựa chọn để giải quyết "vấn đề":
1. loại bỏ các ngắt dòng và trắng-không gian từ mã của bạn
2. thiết lập font-size của phần tử cha mẹ để '0'

Ngoài ra có bạn thiết box-sizing: border-box ?