水平对齐多个div(CSS)

Question

我需要对齐这些divs,以便div"content1"和红色之间的空格等于"content4"和红色之间的空格div.我不介意改变蓝色div边缘,但这适用于任何宽度.

我曾经通过使4蓝色div的宽度+左右边距= 100%来实现这一点,但在这种情况下似乎不能很好地工作.

我也尝试div在红色的内部添加另一个包含所有蓝色div的并给它margin: 0 auto但是它也不起作用.

jsfiddle中的代码(更新)

PS:如果我不够清楚,请随时编辑我的问题.

Answer 1

你可以使用令人难以置信的属性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/