舍入宽度又名均匀分布 div答案

【问题标题】：Rounding width aka spread divs evenly舍入宽度又名均匀分布 div
【发布时间】：2013-04-10 09:01:10
【问题描述】：

我正在努力在可调整大小的 div 内均匀分布五个 div。我看过How to spread elements evenly (horizonatly)? 但无法让它工作:-(

问题似乎是，即使我的 div 宽度设置为 20%，如果周围的 div 宽度不能被 5 整除，最后一个元素也会被包裹到下一行。

我的css是这样的

#exposureSummaryContainer > div { width: 20%;display: inline-block;}

还有我的html：

<div id="exposureSummaryContainer">
    <div>1.000.000</div>
    <div>1.000.000</div>
    <div>1.000.000</div>
    <div>1.000.000</div>
    <div>1.000.000</div>
</div>

如何确保所有五个元素保持在同一行？

我制作了这个http://jsfiddle.net/GTwFb/ 来说明我的问题。

【问题讨论】：

标签： html css

【解决方案1】：

添加float:left;

#exposureSummaryContainer > div { width: 20%;display: inline-block; float:left; background:red}

DEMO

【讨论】：

【解决方案2】：

有一个你看不到的空格，如果你删除它，

div id="exposureSummaryContainer"><div>1.000.000</div><div>1.000.000</div><div>1.000.000</div><div>1.000.000</div><div>1.000.000</div></div>

它应该工作。

【讨论】：

【解决方案3】：

这可能不是最好看的方式.. 但它的工作原理

#exposureSummaryContainer { width: 100%; display: table; }
#exposureSummaryContainer > div { width: 20%;display: table-cell;}

您可以将width 编辑为特定大小

【讨论】：

【解决方案4】：

问题是当 div 元素显示为 inline-block 时，标记上的物理空间，因此解决方法如下：

#exposureSummaryContainer {
    white-space: nowrap;
    word-spacing: -3px;
    letter-spacing: -3px;
}

#exposureSummaryContainer > div { 
    width: 20%;
    display: inline-block;
    white-space: normal;
    word-spacing: normal;
    letter-spacing: normal;
}

【讨论】：

【解决方案5】：

我会使用float: left; 属性

这对我有用： http://jsfiddle.net/GTwFb/2/

【讨论】：

【解决方案6】：

好吧，我会告诉你桌子的把戏：

<table style="width:whateveryouwant">
<tr>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
</tr>
</table>

这对我一直有效^_^

【讨论】：