Question

我的布局有问题，用CSS制作。没有使用Javascript，因为我不知道如何动态定位div（帖子）。由于div的大小不同，Div有空格和行，我不想要那些行。

请看这些照片;

我不希望那个指定的大空间。我试图在CSS中使用显示的各种属性，但没有任何改变大空间。我的CSS代码是这样的：

#post {
    box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.4);
    background: #fbffff;
    color: #6d6d6d;
    margin: 10px 0;
    padding: 15px;
    box-sizing: border-box;
    font-family: tahoma;
    line-height: 20px;
    width: 30%;
    float: right;
}

如果某人使用CSS或Javascript有一些解决方案，那将会有所帮助。我的代码在Ruby on Rails中。

我在JS小提琴中制作一个样本来解决：http://jsfiddle.net/DLKP6/

Answer 1

您正在寻找动态网格布局 - here you can find a repository of solutions。

如前所述，我建议您检查Masonry和Wookmark plugin。

Answer 2

您需要使用Javascript来实现这一目标，有很多Pinterest like Dynamic Grid Layouts可以帮助你，下面是着名的。

http://masonry.desandro.com/

这是一篇精湛的文章，可以帮助您进行设置。

Responsive jQuery Masonry

具有大空间的div用于布置照片的位置

2 个答案: