Question

我正在尝试使用inline-block和宽度作为百分比将两个部分放在一起，但它并没有填满我窗口的整个宽度。

到目前为止我所拥有的：

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？

显示宽度为百分比的内联块

1 个答案: