显示宽度为百分比的行内块 [英] Display Inline-Block with Widths as Percent

问题描述

我试图使用 inline-block 将宽度放在一起，但是它不会填充我的窗口的整个宽度。 / p>

到目前为止：

HTML

 < section class =left-content> 
Some Code
< / section> 
< section class =main-content> 
更多代码
< / 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 ？

解决方案

这是由于您的HTML标记中的空白和换行导致此问题。有两个选项来解决问题：

1.从代码中删除换行符和空格

2.设置 font-父元素的大小为'0'

此外还要设置 box-sizing：border-box ？

I'm trying to put 2 sections beside each other using inline-block and widths as a percentage, but it's not filling up the entire width of my window.

What I have so far:

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

But unless I work out the exact percentage down to a decimal point on my screen it doesn't work. Does anyone know of a way to do this using inline-block or do I have to use float?

解决方案

It is due to the white-space and line break in your HTML markup which causes this issue. There are two options to resolve the "problem":
1. remove the line breaks and white-space from your code
2. set the font-size of the parent element to '0'

Additionally have you set box-sizing: border-box?

这篇关于显示宽度为百分比的行内块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！