甚至是块元素的水平分布

时间:2014-05-01 13:29:23

标签: css

我有三个div(或任何其他块元素):div1是父,div2div3是两个孩子。 div2div3都有固定的宽度。在div2内水平均匀分布div3div1的必要CSS是什么?与图像一样,我希望x的值对于所有三个距离都相等。我不想对div2div3的位置进行硬编码。enter image description here

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

请注意,我希望能够在不明确指定边距的情况下实现此目的。与只有一个div的方式相同,我可以将左右边距设置为auto,我想知道是否有类似的方法有两个div。

1 个答案:

答案 0 :(得分: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;
}

我更新了你刚才提供的小提琴:http://jsfiddle.net/7VQRG/1/

EDITED:这是一种自动进行边距计算的jQuery方法 - 它甚至在黑框右侧有一个输入,您可以在其中为div指定不同的宽度:{{3 }}