3

我花了很多时间试图做到这一点：

在此处输入图像描述

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

所有其他方块都是divs 或spans 或其他任何东西（这不是问题）

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

*我尝试制作所有正方形div，但是因为在一行中它们是一个高度不同的正方形，下一行将缺少“部分”，然后尝试使用边距来解决这个问题 - 但它没有成功，我我相信它并不难。

4

3 回答 3

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/

于 2012-12-27T00:56:45.557 回答
0

尝试绝对定位：

<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>
于 2012-12-27T00:34:01.223 回答
0

由于您没有代码可以向我们展示，我不会为您编写代码......但我可以告诉您什么可能对此有用。

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

  • position

  • margin

  • display

  • float

这里的每一个方块都应该是DIV一个很好的组合，它们应该可以解决问题！

于 2012-12-27T00:41:19.377 回答