栅格布局与css样式布局,CSS响应式栅格布局中边距与百分比配合

在平日的网页布局中，我们需要在一个未知宽度的div块中，平放N个宽度一样的块。(在如今的响应式布局中经常遇上)

如图类似的摆放：

首先，看到这个图片，大家多半想到的是width:25%;float:left;。

不错，这是一个非常好的构思，但局限于块之间没有间距。如果需要为块之间添加10px的间距，同时如果父级div块宽度缩小放大，边距始终都是10px。此时，又该如何呐？

或许，这里只是一个简单的概念，但具体槽点，还是需要大家自己实践的时候，才真的明白(大神不要打我……)。

解决这种问题的方法又很多种，比如，做计算，把每个子块的宽度算出来；但问题来了，父块的宽度根本没办法确定的呀。

为此，我从第一次接触到响应式布局开始，不断的思考这个问题。经过多次的实践后，最终总结出了一个简单的逻辑。

【逻辑】

首先，子块的宽度等于1除以子块数量：1/N。这个宽度是必然的，只有这样才能做到宽度等比分割。

然后，子块中添加一个块级标签，设置其内边距padding为5px，因为两个子块之间的5px加起来等于10px。

而此时子块中的子块，就是内容区了。如上图中，四张图片是一样的宽度，那直接为img添加一个width:100%;即可。

OK了，当父级块层宽度无论如何改变，只要不定于一定内宽度，那么，子块的宽度永远都是一样的，而且间距都是10px。

代码演示一遍吧，或许是我没有讲的不够好，多数人会看不懂我这个。.parent {width:100%;} /*父级块的宽度简单一点，就设置100%吧，做一个伪响应式*/

/*假设需要四个子级块并排*/

.parent .child {width:25%;float:left;} /*子级宽度为1/4,然后靠左浮动*/

.parent .child .childBody {padding:5px;} /*设置内边距为5px，这里设置margin和padding都可以，唯一不同的是margin上下之间会合并*/

主要实现功能就这3行代码，为了大家能够看清逻辑，这里用的后代选择器。

目前我的博客在“猜你喜欢”中，用的就是这种方法(两个多月前写的代码，可能会出现一定偏差)，大家可以缩放浏览器参考效果(我说的是减少浏览器宽度，不是让你按着ctrl滚动滑轮哟~)。