水平对齐多个div（CSS）[重复]

我需要对齐这些divs 使得“content1”和红色之间的空间div等于“content4”和红色之间的空间div. 我不介意换蓝色div的边距，但这应该适用于任何宽度。

我曾经通过制作来实现这一点4个蓝色的宽度divs + 左右边距 = 100%但这在这种情况下似乎效果不佳。

我也尝试添加另一个div在包含所有蓝色的红色里面div并给予它margin: 0 auto但这也不起作用。

jsfiddle 中的代码（已更新） http://jsfiddle.net/FranLegon/L7qpgdkk/7/

PS：如果我不够清楚，请随时编辑我的问题。

您可以使用令人难以置信的属性 box-sizing: border-box;所有现代浏览器都支持，包括 IE8！ 并在 % 上设置宽度和边距：

.red, .blue {
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

.red {
    width:650px;
    height:1000px;
    background:red;
    padding: 1% 0 0 1%; // Space top and left of red
}

.blue {
    height:200px;
    width: 24%;
    background:blue;
    display:inline-block;
    float: left;
    margin: 0 1% 1% 0; // Space bottom and right of each blue
}

http://jsfiddle.net/Pik_at/L7qpgdkk/3/ http://jsfiddle.net/Pik_at/L7qpgdkk/3/