父 div 内的 div 空间（每个不同的宽度）如何均匀？答案

【问题标题】：How evenly space divs (each of a different width) within a parent div?父 div 内的 div 空间（每个不同的宽度）如何均匀？
【发布时间】：2014-03-03 20:34:21
【问题描述】：

我已经看到了这种均匀间距 DIV 的解决方案：(Fluid width with equally spaced DIVs) 但它要求所有 DIV 的宽度都相同。这在我的情况下不起作用。我有 5 个宽度不同的 DIV，希望它们均匀分布。没有javascript这可能吗？

例如：

<!-- The text should not wrap, but be on one line for each div -->
<div class="item" id="item1">Item One</div>
<div class="item" id="item2">Item # Two</div>
<div class="item" id="item3">Item Three</div>
<div class="item" id="item4">Item Four</div>
<div class="item" id="item5">Item Five, the Last</div>

我需要它在 IE8+、Firefox 4+、Chrome、Safari 中工作。

编辑： 另一个要求：div 在最后一个 DIV 的右侧或第一个 DIV 的左侧不应有空格。所以它们之间的空白等于它们的宽度之和与容器div的宽度之差。

【问题讨论】：

定义“均匀间隔”
@Madbreaks 在每个 DIV 的边缘之间留出相同数量的空白
如果这真的是您唯一的要求，只需对每个使用相同的左右边距，并禁用最左边的左边距，最右边的右边距。
@Madbreaks 如果我事先不知道 div 的宽度，我该怎么做（因为即使指定了“px”，每个浏览器都会以稍微不同的实际宽度制作文本）？
如果有的话，如何设置内部div和容器div的宽度？

标签： css positioning html fluid-layout

【解决方案1】：

你可以使用：display:flex;在父容器上

.evenly {
  display:flex;
  justify-content:space-between;
  border:solid;
}
.evenly div {
  white-space:nowrap;
  background:gray;
}

<div class="evenly">
  <div class="item" id="item1">Item One</div>
<div class="item" id="item2">Item # Two</div>
<div class="item" id="item3">Item Three</div>
<div class="item" id="item4">Item Four</div>
<div class="item" id="item5">Item Five, the Last</div>
</div>

演示：http://codepen.io/anon/pen/wxtqJ

用于演示目的的额外边框和背景。

如果您需要适用于旧版导航的替代方案，您可以使用 text-align:justify 属性：http://codepen.io/anon/pen/FnDqr。

【讨论】：

好吧，看来你已经在另一篇文章中找到答案了！？
@GCyrillius 这在 IE8+ 中不起作用。还有什么其他帖子有答案？我只看到了同样大小的 DIV 的答案，而我的却没有。
这篇你与stackoverflow.com/questions/6865194/…相关的帖子，对于IE8它应该可以工作，除非它理解:after伪元素，除非你使用怪癖模式。
也许你应该用 IE8 s.codepen.io/gc-nomade/fullpage/GyiCv 以全页模式测试它？
... IE 需要 font-size:0.01px 而不是 font-size:0;为了显示后面的元素:)...忘了这个

【解决方案2】：

我更喜欢 display:flex;就像之前答案中所说的那样。但是，如果我正确理解了要求，还有另一种解决方案。由于我这里没有 IE8 TestVM，所以我将测试交给您。您可以使用显示：表格；

以下解决方案：

.items
{
    display: table;
    width: 100%;
}
.item
{
    display:table-cell;
}

有了这个 HTML

<div class="items">
    <div class="item" id="item1">Item One</div>
    <div class="item" id="item2">Item # Two</div>
    <div class="item" id="item3">Item Three</div>
    <div class="item" id="item4">Item Four</div>
    <div class="item" id="item5">Item Five, the Last is pretty long</div>
</div>

测试小提琴：http://fiddle.jshell.net/HLFXH/

【讨论】：

@DonRhummy 谢谢，我知道这一点。很遗憾，但我们习惯于对 IE 感到沮丧……不是吗？ ;)
我有一种奇怪的感觉，我错过了一些要求......因为如果它是那么容易，会有更多的答案......@op 如果我错过了什么，请添加评论。
@DonRhummy 你做了看看我的回答不是关于 display-flex 对吧？如果答案不合适，请告诉我缺少什么

【解决方案3】：

我正在检查此问题的解决方案，因为我还想显示与您的结构相似但只有三个 div 的结构。所以，我在 .item 中又添加了一个 div

<div class="items">
    <div class="item" id="item1"><div>Item One</div></div>
    <div class="item" id="item2"><div>Item # Two</div></div>
    <div class="item" id="item3"><div>Item Three</div></div>
    <div class="item" id="item4"><div>Item Four</div></div>
    <div class="item" id="item5"><div>Item Five, the Last is pretty long</div></div>
</div>

我以百分比或像素为单位给出了“.item”类的宽度。我取了最长 div 的宽度，并使用 justify-content 作为空格，然后在“.item”中相应地对齐单个 div。

希望这会有所帮助。

【讨论】：