在 CSS 中指定与父 DIV 相关的精确百分比宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8010120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Specifying exact percentage widths in relation to parent DIV in CSS
提问by Nick
I am attempting to create a visual element using DIV elements and CSS which should display data in the format demonstrated below.
我正在尝试使用 DIV 元素和 CSS 创建一个可视元素，它应该以下面演示的格式显示数据。
[-----50%-----|--25%--|--25%--]
[-----50%-----|--25%--|--25%--]
When using the code and CSS I've specified below, my final element always spills onto the next line and the CSS percentage values I'm specifying don't seem to create the layout properly.
使用我在下面指定的代码和 CSS 时，我的最终元素总是溢出到下一行，并且我指定的 CSS 百分比值似乎无法正确创建布局。
Could anybody suggest a better way to do this?
有人可以提出更好的方法来做到这一点吗？
My HTML
我的 HTML
<div class="visual-indicator-title">
All Items</div>
<div class="visual-indicator-holder">
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;">
25%</div>
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;">
25%</div>
<div class="vi-internal-element" style="width: 50%;">
50%</div>
</div>
<div class="visual-legend">
<ul class="inline-block">
<li>
<div class="legend-blue">
</div>
Sales</li>
<li><span class="legend-tan"></span>Processed</li>
<li><span class="legend-grey"></span>Pending Processing</li>
</ul>
My CSS
我的 CSS
.visual-indicator-title{
font-size:12px;
font-weight:bold;
color:#777777;
}
.visual-indicator-holder
{
width:100%;
background-color:#666666;
height:28px;
border-radius: 8px;
}
.visual-indicator-holder .vi-internal-element
{
font-size:11px;
text-align:center;
color:#ffffff;
background-color:#777777;
border-radius: 6px;
display:inline-block;
}
采纳答案by Wesley Murch
The reason this happens is that with inlineor inline-block, white space in the element will affect the rendering (adds space). Here is your demo working with white space removed, no changes to the CSS: http://jsfiddle.net/fZXnU/
发生这种情况的原因是使用inline或inline-block，元素中的空白会影响渲染（增加空间）。这是您删除空白的演示，CSS 没有更改：http: //jsfiddle.net/fZXnU/
Removing white space is not trivial though, so you'd be better off floating the elements (which triggers display:block). Working demo with plenty of white space: http://jsfiddle.net/fZXnU/1/
不过，删除空白并非易事，因此最好浮动元素（触发display:block）。有大量空白的工作演示：http: //jsfiddle.net/fZXnU/1/
回答by Zack Marrapese
You can use float: left, position: relative, and then define width in percentage as you are.
您可以使用float: left, position: relative，然后按原样以百分比形式定义宽度。
I modified your code to use float here: http://jsfiddle.net/Z3kdP/.
我修改了您的代码以在此处使用浮动：http: //jsfiddle.net/Z3kdP/。
回答by James Montagne
If you remove the white-space between the divs then it works as intended.
如果您删除divs之间的空格，则它会按预期工作。
EDIT: See this question: How to remove the space between inline-block elements?
编辑：看到这个问题： How to remove the space between inline-block elements?
You can make font-size: 0on the parent element if you don't want to edit your html.
font-size: 0如果您不想编辑您的 html，您可以在父元素上制作。
回答by Rob
All of those elements have margin and padding with them as well as the percentages creating rounding errors during calculation. So you need to make sure you set, or take into consideration, what margin is doing to this. For rounding errors, it's typical to let the percentages add up to something less than 100% but then add margin: auto to center the whole thing.
所有这些元素都有边距和填充以及在计算过程中产生舍入误差的百分比。因此，您需要确保设置或考虑保证金对此有何影响。对于舍入误差，通常让百分比加起来小于 100%，然后添加 margin: auto 以将整个事物居中。
