我花了很多时间尝试这样做:
黑色方 block 是一个div
(不一定是div
)容器
。
所有其他方 block 都是 div
或 span
或其他任何东西(这不是问题)
有人可以指导我如何使用纯 HTML、CSS 和 Javascript 完成此操作吗?
*我尝试制作所有正方形 div
但是因为在一行中它们是一个具有不同高度的正方形,下一行将缺少“部分”然后尝试用margin- 但它没有成功,我相信它没有那么难。
最佳答案
您需要使用的是 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/
关于javascript - div 在盒子中的排列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14047962/