javascript - div 在盒子中的排列

Question

我花了很多时间尝试这样做:

黑色方 block 是一个div(不一定是div)容器。

所有其他方 block 都是 div 或 span 或其他任何东西(这不是问题)

有人可以指导我如何使用纯 HTML、CSS 和 Javascript 完成此操作吗？

*我尝试制作所有正方形 div 但是因为在一行中它们是一个具有不同高度的正方形，下一行将缺少“部分”然后尝试用margin- 但它没有成功，我相信它没有那么难。

Answer 1

您需要使用的是 CSS3 属性 column-count。它显示任何类型容器内的列数。所以如果你想把它用作相册

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

-webkit-column-count: 3;
-webkit-column-gap:   0px;
-moz-column-count:    3;
-moz-column-gap:      0px;
column-count:         3;
column-gap:           0px;

}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}

#photos 是容器。

感谢 Chris Coyier 的文章 http://css-tricks.com/seamless-responsive-photo-grid/