2

我正在努力在可调整大小的 div 中均匀地分布五个 div。我看过如何均匀地（水平地）分布元素？但不能让它工作:-(

问题似乎是即使我的 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/来说明我的问题。

4

6 回答 6

1

添加float:left;

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

演示

于 2013-04-10T09:03:50.413 回答
1

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

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

它会起作用的。

于 2013-04-10T09:06:23.927 回答
0

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

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

这一直对我有用^_^

于 2013-04-10T09:14:50.493 回答
0

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

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

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

于 2013-04-10T09:05:55.507 回答
0

问题是当 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;
}
于 2013-04-10T09:06:52.783 回答
0

我会使用该float: left;物业

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

于 2013-04-10T09:09:01.500 回答