说起CSS的布局，有太多了，现在常见的有固定布局、流体布局、弹性布局，有关于这三种常见的布局，Kayla Knight在《Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?》一文中做出了详细的对比介绍，而且Matthew James Taylor也给我们制作了很多个这方面的实例，大家还可以看看Float-less CSS layout带来的这三个类型的布局效果。随着CSS3的Media Queries出现，给我们的布局带来一种全新的体验——适应于多媒价的布局响应。

在上一篇《Web布局连载——两栏固定布局（四）》中留了一个下文，“No div, no float, no clear, no hack”。看起来很有意思，这种没有div，没有float，没有清除浮动和没有hack的布局，还是看到的少数，当然除了 table布局。因为table布局是不需要使用前面说的几个部分。那么今天我们要讲的布局是不是table布局呢？欲想知道，那就一起随着往下看吧。

布局在W3cplus说的也比较多了，但Responsive的列布局还是第一回说，（如果你是第一次听说Responsive这个词，建议你点击这和先了解Responsive）。今天看到一篇有关于Responsive的列布局教程，觉得值得一读，将其译成中文，希望对有需要的同学有所帮助。

通常我们进行列布局，都需要在第一列添加一个类名“first”，在最后一列添加一个类名“last”，主要用来清除他们之间的margin，（有关这方面的介绍可以详细阅读为之写的《CSS解决方案》中的《项目列表解决方安》，这里详细介绍了类似于列布局的相关方法，或者点击这里了解如何避免重复列末尾的Margin。）而且还通过添加类名“clearfix”来清除浮动。这些都是比较古老的解决方案了，今天我们一起来看一个新方案，就是使用CSS3的伪元素选择器“nth-of-type”来实现一个简单的Responsive列布局效果。Nick La使用这种方法制作了一些WordPress主题模板。制作这些模板中，他没有使用“first”和“last”类名就实现了多列在不同设备下都能自适应，换句话说，他就是能实现四列、三列、两列等等之间的切换。