水平地排列多个的div（CSS）的

问题描述

我需要调整这些 DIV S以便内容1和红 DIV 之间的空间等于content4，红色 DIV 之间的空间。 我不介意变蓝 - DIV 的保证金，但这应该适用于任何宽度

I need to align these divs so that the space between "content1" and the red div equals the space between "content4" and the red div. I don't mind changing the blue-div's margin but this should work for any width.

我用通过使的宽度的4个蓝色的 DIV S +他们的左，右页边距= 100％的，但是那并不是实现这一不像是会在这种情况下正常工作。

I used to achieve this by making the width of the 4 blue divs + their left and right margins = 100% but that doesn't seem to work well in this case.

我也尝试添加另一个 DIV 里面的红色包含所有蓝色 DIV 和给它保证金：0汽车但是，这不是工作或者

I also tried adding another div inside the red one that contained all the blue divs and giving it margin: 0 auto but that's not working either.

code中的jsfiddle（更新）

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

PS: if i'm not clear enough, please feel free to edit my question.

推荐答案

您可以用令人难以置信的属性框，大小：边界盒;所有现代浏览器的支持，包括IE8！并设置％的宽度和边距：

You can use the incredible property box-sizing: border-box; supported by all modern browser, IE8 included!And set the width and margin on % :

.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/

这篇关于水平地排列多个的div（CSS）的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！