banner

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

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

如图类似的摆放:

CSS栅格布局用边距与百分比,让你不做计算题

首先,看到这个图片,大家多半想到的是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滚动滑轮哟~)。

阅读: 3946
在同意共创许可协议(CC BY-NC-SA-4.0)的前提下,您可以转载本文。
橙色阳光
https://oss.so/article/51

相关阅读

留言评论

2条留言
天兴工作室
那个方法不好么?父层级设置左边距-1%,然后子块全部设置左边距为1%...反正我的自适应都是這样些的,傻逼ie不支持而已,禁止ie查看便是...
橙色阳光
1%受到宽度的影响,而我研究出来的,可以固定为指定宽度