如何在div中水平分隔图像？

Question

如何放置如下图像：

我希望图像之间的空间相同。另外，在调整窗口大小时，我希望更新空间，以便每个空间始终具有相同的大小。

<div id="panel">
    <img id="icon1" class="icon" src="...">
    <img id="icon2" class="icon" src="...">
    <img id="icon3" class="icon" src="...">
</div>

以下是我所拥有的： http://jsfiddle.net/eBLgP/2/

看起来很像这篇文章：Fluid width with equally spaced DIVs

但它不一样，我想在div的右侧和左侧之间也有空格。上面的例子对我来说也很复杂。

Answer 1

更新了小提琴：

http://jsfiddle.net/eBLgP/5/

最终代码，具有响应行为：

#panel {
border: 2px solid blue;
    overflow: auto;
}

.icon-container {
    float: left;
    width: 33.3%;
    text-align: center;
}

当你使元素浮动时，只要它们以相同的方向浮动，你就可以在同一行和相同的方向上对它们进行排序，但是对于父容器（在这种情况下为面板div）来识别高度包含元素你需要溢出属性，所以添加

overflow: auto;

现在您可以添加一个div来包含图像，因为直接在图像上使用宽度会改变图像尺寸，而不是预期的图像尺寸。

一旦你得到浮动的div元素，你可以用它们的百分比来展开它们，授予它们所有的容器内容都有相同的空间，不管屏幕变大或变小。

唯一剩下的就是将图像置于其父容器中，因为默认情况下div是块显示，您可以使用text-align: center授予父项的所有子元素（本例中的图像）将是中心

Answer 2

您可以尝试使用text-align：justify并在底部添加1行，如下所示： http://jsfiddle.net/26CLe/1/

#panel {
    border: 2px solid blue;
    text-align:justify ;
}

#panel:after {
    content:'';
    display:inline-block;
    width:100%;
}

唯一的问题是它在底部添加了一条线，但是理由是可以的。 这个解决方案来自这里： http://yidille.free.fr/plux/valign/?69-text-align-justify-sur-derniere-ligne-et-centrage-de-boites