用大盒子套更大的盒子解决问题

用大盒子套更大的盒子解决问题

在解决问题的时候可能会有这样的情况：一个大盒子里面放很多小盒子，这些小盒子大小相同，一排可以放好几个小盒子，但又不能刚刚好放下。比如说京东的项目：

仔细看我们会发现每一排最后一个小盒子都比前面的窄一些，最下面一排的盒子都比上面的短一些，但我们又不可能为这些盒子单独设置样式，这样麻烦也不利于维护，所以我们只好为小盒子设置统一样式。
最原始的情况类似于下面这种情况。

但怎么使多出来的小盒子能到上面那一排上面去呢？这里有一个解决办法：用大盒子套更大的盒子解决问题。意思就是在外面的大盒子里面套一个比这个大盒子还要大一点又不过大的盒子，再把小盒子们放在这个更大的盒子里。

咦，最后一个小盒子是怎么上去的？我们把里面更大的盒子边框显示出来你就知道了。

看！这样最后一个小盒子就可以上去一排了，但我们的本意是使小盒子的露出大盒子的边框不显示出来。这就要再大盒子的样式上面应用overflow:hidden了。

但我们发现小盒子们的边框重叠起来了，为了美观，我们可以对小盒子应用外边距的负值。

最后我们把颜色改为一致的。

这样就好看多啦！
下面是html及css主要部分的代码。

    <div class="d"><div class="dd"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>

    <style type="text/css">.d {width: 300px;height: 300px;border: 1px solid #cccccc;overflow: hidden;}.dd div {width: 60px;height: 80px;border: 1px solid #cccccc;float: left;margin-left: -1px;margin-top: -1px;}.dd {width: 320px;height: 300px;}</style>

用大盒子套更大的盒子解决问题

在解决问题的时候可能会有这样的情况：一个大盒子里面放很多小盒子，这些小盒子大小相同，一排可以放好几个小盒子，但又不能刚刚好放下。比如说京东的项目：

仔细看我们会发现每一排最后一个小盒子都比前面的窄一些，最下面一排的盒子都比上面的短一些，但我们又不可能为这些盒子单独设置样式，这样麻烦也不利于维护，所以我们只好为小盒子设置统一样式。
最原始的情况类似于下面这种情况。

但怎么使多出来的小盒子能到上面那一排上面去呢？这里有一个解决办法：用大盒子套更大的盒子解决问题。意思就是在外面的大盒子里面套一个比这个大盒子还要大一点又不过大的盒子，再把小盒子们放在这个更大的盒子里。

咦，最后一个小盒子是怎么上去的？我们把里面更大的盒子边框显示出来你就知道了。

看！这样最后一个小盒子就可以上去一排了，但我们的本意是使小盒子的露出大盒子的边框不显示出来。这就要再大盒子的样式上面应用overflow:hidden了。

但我们发现小盒子们的边框重叠起来了，为了美观，我们可以对小盒子应用外边距的负值。

最后我们把颜色改为一致的。

这样就好看多啦！
下面是html及css主要部分的代码。

    <div class="d"><div class="dd"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>

    <style type="text/css">.d {width: 300px;height: 300px;border: 1px solid #cccccc;overflow: hidden;}.dd div {width: 60px;height: 80px;border: 1px solid #cccccc;float: left;margin-left: -1px;margin-top: -1px;}.dd {width: 320px;height: 300px;}</style>