像谷歌一样重叠的div盒子

Question

如何制作重叠的div框，如google keep。

任何答案都将受到高度赞赏！ 谢谢

Answer 1

检查此编码器

https://codepen.io/rahulkapoor/pen/uAhzx

bootstrap 4还有类卡片列，这可能会帮助您达到您想要的效果

http://v4-alpha.getbootstrap.com/components/card/#Cardcolumns

Answer 2

您可以将页面划分为网格，并使用div填充每列。您可以使用css floats或html tables来获得您正在寻找的结果。

Answer 3

最好（也是最向后兼容）的方法是创建一系列水平相邻的div。它们将在JavaScript中创建，并且每个都具有相等的宽度，因此它们加起来为其容器宽度的100％。例如：

for(i = 0; i < numColumns; i++) { 
    var column = $("<div class='column'></div>");
    column.css("width", (100 / numColumns) + "px");
    $("#column-container-id-here").append(column);
}

必须在样式表中定义类column才能使display属性为inline-block，以便所有div的行都像列一样。然后，在每个column div中你可以拥有你的牌（也可以是div），它们会自动垂直堆叠。