Question

我已经看到这种解决方案可以均匀地间隔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的宽度之间的差异。

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

DEMO：http://codepen.io/anon/pen/wxtqJ

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

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

Answer 2

我更喜欢display：flex;喜欢在之前的回答中说。但如果我正确理解了要求，还有另一种解决方案。由于我这里没有IE8 TestVM，我让测试给你。你可以使用display：table;

以下解决方案：

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

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

然后我以百分比或px的形式给出了“ .item”类的宽度。我采用了最长div的宽度，并使用justify-content作为间隔，然后将各个div相应地对齐在“ .item”中。

希望这会有所帮助。

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

3 个答案: