div是一个盒子安排

Question

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

黑色方块为div（不一定是div）container。

所有其他方格都是div s或span s或其他（不是问题）

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

*我尝试制作所有正方形div但是因为在一行中他们是一个高度不同的正方形，下一行将缺少“部分”然后尝试用margin-but来管理这个问题它没有成功，我确信它并不那么困难。

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/

Answer 2

尝试绝对定位：

<style>
.rect {
    position: absolute;
    width: 100px ;
    height: 200px;
}

</style>
<div class="rect" style="top:0;left:0;border:3px solid blue"></div>
<div class="rect" style="top:206px;left:0;border:3px solid green"></div>
<div class="rect" style="top:0;left:106px;border:3px solid red; height: 300px"></div>

Answer 3

由于你没有代码向我们展示我不会为你做代码...但我可以告诉你对此有用的东西。

以下是一些可以帮助您实现此目标的css参数：

• position

• margin

• display

• float

这里的每一个方格应该是DIV，这些方法的好组合应该可以做到！