.pic{
 width: 230px;//加上宽度， 和 .pic img里的宽度相同
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 2px;
 box-shadow: 0 0 5px #ccc;
 }

第一张图片太宽了

每个div里放一个img

试过selectivizr.js和ie-css3.htc都没起作用还有其他的脚本可用吗

代码都不贴的么？第一次做这种看图分析题，但我觉得也就可能事两种情况：第一种是因为层级嵌套不对，以至于你那两个div被分开处理了。第二种是因为你选取的是#main下的div处理，那个文字部分刚好也是用div写的，就被js用同样的方法处理了。嗯，下次记得贴代码

你的写什么代码， 贴出来看下

http://pan.baidu.com/s/1jGE77O6

我看5-1的时候介绍了CSS3这个方法是将图片顺序打乱了,先竖向排列在进行更像排列的...个人觉得还是用jquery 或是原生JS比较好,因为不会因为浏览器缩放问题而导致页面发生变化.

给main 设置  display:inline-block;

css多列布局 第一段对多列布局的介绍

BUG出现原因：引用 @天涯123 的回答 “css3多栏布局偶尔会出现某一列起始高度比另外列的起始高度略高,或者会出现某一列第一张图片的顶部显示在它前一列最后一张图片后面,这是因为css3多列加载的机制是一列列的排满后再到第二列,以此来达到瀑布流的效果,浏览器在渲染这些图片的时候是按照宽度和列数(或者图片的设置宽度)来决定每列图片多少张,但是因为图片的高度是不定的”

 起初只是用来为多行文本（行内元素）进行多列布局，而这个案例我们的div是块级元素，

所以呢，只需要设置div属性 display:inline-block;  这样我们就可以实现想要的效果了

因为你已经设置了列宽了，列数根据计算所得最大只能为5，如果是6的话，列宽就不能满足所设置的202了

你这样问没什么意义，因为你一点都不了解。”是不是。。。吗？”这东西不能靠猜的。建议先学习

直接写在样式里就可以啊   div的box里面再加一个div去设置文字就ok

css3这个讲的单纯是布局而已

看着没什么问题呀！

哈哈！同感……

就不用呗