css - block 元素水平均匀分布

Question

我有三个 div(或任何其他 block 元素):div1 是父元素，div2 和 div3 是两个子元素。 div2 和div3 都有固定的宽度。在 div1 中水平均匀分布显示 div2 和 div3 需要什么 CSS？如图所示，我希望 x 的值对于所有三个距离都相等。我不想对 div2 和 div3 的位置进行硬编码。

你可以在这里看到我尝试的 JSFiddle:http://jsfiddle.net/pUv85/ .然而，这似乎将 div 放在彼此之上。

请注意，我希望能够在不明确指定边距的情况下实现这一点。就像只有一个 div 一样，我可以将左右边距设置为 auto，我想知道是否有两个 div 的类似方法。

Answer 1

您在问题中并没有真正说明很多，所以我没有理由认为以下内容对您不起作用。

因此只需在 div2 的两侧添加相等的边距，然后为 div3 设置相同的边距但仅在右侧，并应用 float:left 给两者。当然，您必须确保 div1 比这些大。

您可以选择使用百分比来更好地满足您的需求，具体取决于您的代码的其余部分。

#div2 {
    margin-left: 10px; /* or you could set this to any unit you want */
    margin-right: 10px /* should be the same amount as above */
    float:left;
}

#div3 {
    margin-right: 10px /* again, should be the same amount as above */
    float:left;
}

我更新了您刚才好心提供的 fiddle :http://jsfiddle.net/7VQRG/1/

已编辑:这是一种自动计算边距的 jQuery 方法 - 它甚至在黑框右侧有一个输入，您可以在其中为您的 div 指定不同的宽度:http://jsfiddle.net/7VQRG/2/