cms系统loop循环造成的页面布局问题如何解决

一直关注我博客的人都知道，我博客首页版面上之前有参差不齐的问题，如果把首页保存成图片看会更明显，就是因为一直找不到解决loop循环造成页面布局问题的方法。

杨青个人博客也存在同样的问题，只不过现在解决了，跟我的方法是一样的，nth-child()，下面来着重讲解一下nth-child（）、position定位在此处的应用。

先看下面这张图：

不管是phpcms、dedecms还是帝国cms都有loop循环，loop循环一般用于ul里面的li循环，像上面那张图里的li之间的间距，因为loop只对一个li进行循环，所以ul li{}这种样式写法，注定会造成页面的参差不齐，这个时候就要使用nth-child()了。用浮动和间距来布局这四个li很容易出错，也会对下面的结构造成影响，使用了nth-child()就用不了浮动了，不相信的朋友可以亲自试一下，最好的办法就是nth-child()和position定位结合起来用，像下面这样：

nth-child()和position定位的应用并不难，有点难度的是写响应式时如何清除定位：

我一直坚持用原生代码写响应式，下面分享一下在li里面的内容比较复杂时如何写响应式方面的一些经验。

我博客的模板是完全响应式的，而不是在某些分辨率下不考虑响应式。像上面截图中，li里面有悬停图片放大效果，这个效果需要图片外面有一个div盒子来隐藏溢出，图片上面还有css3动画透明层展开、透明度加深效果，这所有的效果如果要写响应式就把它放在一个盒子里，这个盒子不是li，而是li里面再定义一个盒子，为什么要这么做的？

比如我的网页宽度是1140px的，如果横排li有三个，那么屏幕宽度小于1140px时，每个li宽度给30%再加上margin-left: 2.5%，li里面的大盒子给margin:auto,这样看起来三个li的布局就很匀称了，然后再拉小屏幕宽度，当间距肉眼看着一样的时候再进行下一个分辨率的媒体查询操作。

更复杂的原生代码响应式布局，比如本站首页作品展示里面的文字如何响应式，请直接右键查看样式源代码或使用火狐浏览器开发者模式响应式布局查看，如果在拉动的过程中出现页面错乱问题，请重新载入页面，即刷新。