作者:naniwang99_537_742 | 来源:互联网 | 2023-05-21 10:06
我需要对齐这些div
s,以便div
"content1"和红色之间的空格等于"content4"和红色之间的空格div
.我不介意改变蓝色div
边缘,但这适用于任何宽度.
我曾经通过使4蓝色div
的宽度+左右边距= 100%来实现这一点,但在这种情况下似乎不能很好地工作.
我也尝试div
在红色的内部添加另一个包含所有蓝色div
的并给它margin: 0 auto
但是它也不起作用.
jsfiddle中的代码(更新)
PS:如果我不够清楚,请随时编辑我的问题.
1> Pik_at..:
你可以使用令人难以置信的属性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/