width - 以百分比显示宽度的行内 block

Question

我尝试使用 inline-block 和宽度百分比将 2 个部分并排放置，但它没有填满我的窗口的整个宽度。

我目前拥有的:

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

但是除非我在屏幕上计算出精确到小数点的百分比，否则它是行不通的。有谁知道使用 inline-block 执行此操作的方法还是我必须使用 float？

Answer 1

这是由于您的 HTML 标记中的空格和换行符导致了此问题。解决“问题”有两种选择:
1. 从代码中删除换行符和空格
2. 设置父元素的font-size为'0'

此外，您是否设置了box-sizing: border-box？